diff --git a/README.md b/README.md
index 191e096..2aa3b51 100644
--- a/README.md
+++ b/README.md
@@ -122,8 +122,8 @@ All column based layouts accept the following `layout` options:
 | `max_cols`      | number         | Maximum number of columns to show                                                                                                             | 4 if sidebar is hidden <br> 3 if sidebar is shown |
 | `rtl`           | `true`/`false` | Place columns in right-to-left order                                                                                                          | `false`                                           |
 | `column_widths` | special        | A [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) specification of column widths            | `none`                                            |
-| `margin`        | string         | A CSS margin applied to the layout itself                                                                                                     | `4px 4px 0px 4px`                                 |
-| `padding`       | string         | A CSS padding applied to the layout itself                                                                                                    | `0px`                                             |
+| `margin`        | string         | A CSS margin applied to the layout itself                                                                                                     | `0px 4px 0px 4px`                                 |
+| `padding`       | string         | A CSS padding applied to the layout itself                                                                                                    | `4px 0px 4px 0px`                                 |
 | `height`        | string         | A CSS height applied to the layout itself                                                                                                     | `auto`                                            |
 | `card_margin`   | string         | CSS margin applied to each card in the layout                                                                                                 | `var(--masonry-view-card-margin, 4px 4px 8px)`    |
 | `reflow`        | `true`/`false` | If `true` the layout will get reorganized when cards are hidden (e.g. with conditional or entity-filter cards). May cause performance issues. | `false`                                           |
diff --git a/layout-card.js b/layout-card.js
index 6788b8c..52a5afd 100644
--- a/layout-card.js
+++ b/layout-card.js
@@ -4,13 +4,12 @@ function t(t,e,i,o){var s,n=arguments.length,a=n<3?e:null===o?o=Object.getOwnPro
       </ha-fab>
     `}static get _fab_styles(){return n`
       ha-fab {
-        position: sticky;
-        float: right;
+        position: fixed;
         right: calc(16px + env(safe-area-inset-right));
         bottom: calc(16px + env(safe-area-inset-bottom));
         z-index: 1;
       }
-    `}}t([tt()],St.prototype,"cards",void 0),t([tt()],St.prototype,"index",void 0),t([tt()],St.prototype,"narrow",void 0),t([tt()],St.prototype,"hass",void 0),t([tt()],St.prototype,"lovelace",void 0),t([tt()],St.prototype,"_editMode",void 0),t([tt()],St.prototype,"_config",void 0);class Mt extends St{constructor(){super(...arguments),this._mediaQueries=[]}async setConfig(t){var e,i,o,s;await super.setConfig(t);for(const t of this._config.cards)if("string"!=typeof(null===(e=t.view_layout)||void 0===e?void 0:e.show)&&(null===(o=null===(i=t.view_layout)||void 0===i?void 0:i.show)||void 0===o?void 0:o.mediaquery)){const e=window.matchMedia(`${t.view_layout.show.mediaquery}`);this._mediaQueries.push(e),e.addEventListener("change",(()=>this._makeLayout()))}else this._mediaQueries.push(null);this._observer&&this._observer.disconnect(),this._observer=new gt((()=>{this._updateSize()})),this._cardObserver&&this._cardObserver.disconnect(),(null===(s=t.layout)||void 0===s?void 0:s.reflow)&&(this._cardObserver=new MutationObserver((t=>{for(const e of t)"attributes"!==e.type||"style"!==e.attributeName&&"hidden"!==e.attributeName||this._makeLayout()})))}async updated(t){var e;await super.updated(t),(t.has("_columns")||t.has("cards"))&&this._makeLayout(),t.has("_editMode")&&this._makeLayout(),(t.has("narrow")||t.has("hass")&&(null===(e=t.get("hass"))||void 0===e?void 0:e.dockedSidebar)!=this.hass.dockedSidebar)&&(this._updateSize(),this._makeLayout())}async firstUpdated(){var t,e,i,o,s,n,a,r,l,d,c,h,u,p,v,g;this._updateSize();const _=(null===(t=this._config.layout)||void 0===t?void 0:t.width)||300,f=(null===(e=this._config.layout)||void 0===e?void 0:e.max_width)||((null===(i=this._config.layout)||void 0===i?void 0:i.width)?Math.ceil(1.5*(null===(o=this._config.layout)||void 0===o?void 0:o.width)):500),m=(null===(s=this._config.layout)||void 0===s?void 0:s.width)?2*this._config.layout.width:600,y=document.createElement("style");y.innerHTML=`\n      :host {\n        --column-max-width: ${f}px;\n        --column-width: ${_}px;\n        --column-widths: ${null!==(a=null===(n=this._config.layout)||void 0===n?void 0:n.column_widths)&&void 0!==a?a:"none"};\n        --layout-margin: ${null!==(l=null===(r=this._config.layout)||void 0===r?void 0:r.margin)&&void 0!==l?l:"4px 4px 0px 4px"};\n        --layout-padding: ${null!==(c=null===(d=this._config.layout)||void 0===d?void 0:d.padding)&&void 0!==c?c:"0px"};\n        --card-margin: ${null!==(u=null===(h=this._config.layout)||void 0===h?void 0:h.card_margin)&&void 0!==u?u:"var(--masonry-view-card-margin, 4px 4px 8px)"};\n        --layout-height: ${null!==(v=null===(p=this._config.layout)||void 0===p?void 0:p.height)&&void 0!==v?v:"auto"};\n        --layout-overflow: ${void 0!==(null===(g=this._config.layout)||void 0===g?void 0:g.height)?"auto":"visible"};\n      }\n      @media (max-width: ${f}px) {\n        .column:first-child > * {\n          margin-left: 0;\n        }\n        .column:last-child > * {\n          margin-right: 0;\n        }\n      }\n      @media (max-width: ${m-1}px) {\n        .column {\n          --column-max-width: ${m}px;\n        }\n      }\n    `,this.shadowRoot.appendChild(y)}connectedCallback(){super.connectedCallback(),this._updateSize()}disconnectedCallback(){super.disconnectedCallback(),this._observer.disconnect()}async _updateSize(){var t,e,i;let o=this.getBoundingClientRect().width,s=0;s=Math.floor(o/((null===(t=this._config.layout)||void 0===t?void 0:t.width)||300)),s=Math.min(s,(null===(e=this._config.layout)||void 0===e?void 0:e.max_cols)||("docked"===(null===(i=this.hass)||void 0===i?void 0:i.dockedSidebar)?3:4)),s=Math.max(s,1),s!==this._columns&&(this._columns=s)}_shouldShow(t,e,i){var o;if(!super._shouldShow(t,e,i))return!1;if(null===(o=this._config.layout)||void 0===o?void 0:o.reflow){if("none"===getComputedStyle(t).display)return!1;if(!0===t.hidden)return!1}const s=this._mediaQueries[i];return!s||!!s.matches}isBreak(t){return"layout-break"===t.localName}async _makeLayout(){this._makeColumnLayout()}async _makeColumnLayout(){var t;if(this._observer.disconnect(),this._cardObserver&&this._cardObserver.disconnect(),!this._columns)return;let e=[];for(let t=0;t<this._columns;t++){const t=document.createElement("div");t.classList.add("column"),t.length=0,e.push(t)}let i=this.cards.map(((t,e)=>{const i=this._config.cards[e];return{card:t,config:i,index:e,show:this._shouldShow(t,i,e)}}));await this._placeColumnCards(e,i.filter((t=>{var e;return(null===(e=this.lovelace)||void 0===e?void 0:e.editMode)||t.show}))),e=e.filter((t=>t.childElementCount>0)),(null===(t=this._config.layout)||void 0===t?void 0:t.rtl)&&e.reverse();const o=this.shadowRoot.querySelector("#columns");for(;o.firstChild;)o.removeChild(o.firstChild);if(this._cardObserver)for(const t of this.cards)this._cardObserver.observe(t,{attributes:!0});for(const t of e)o.appendChild(t);this.requestUpdate(),await this.updateComplete,this._observer.observe(this)}async _placeColumnCards(t,e){}render(){return U`
+    `}}t([tt()],St.prototype,"cards",void 0),t([tt()],St.prototype,"index",void 0),t([tt()],St.prototype,"narrow",void 0),t([tt()],St.prototype,"hass",void 0),t([tt()],St.prototype,"lovelace",void 0),t([tt()],St.prototype,"_editMode",void 0),t([tt()],St.prototype,"_config",void 0);class Mt extends St{constructor(){super(...arguments),this._mediaQueries=[]}async setConfig(t){var e,i,o,s;await super.setConfig(t);for(const t of this._config.cards)if("string"!=typeof(null===(e=t.view_layout)||void 0===e?void 0:e.show)&&(null===(o=null===(i=t.view_layout)||void 0===i?void 0:i.show)||void 0===o?void 0:o.mediaquery)){const e=window.matchMedia(`${t.view_layout.show.mediaquery}`);this._mediaQueries.push(e),e.addEventListener("change",(()=>this._makeLayout()))}else this._mediaQueries.push(null);this._observer&&this._observer.disconnect(),this._observer=new gt((()=>{this._updateSize()})),this._cardObserver&&this._cardObserver.disconnect(),(null===(s=t.layout)||void 0===s?void 0:s.reflow)&&(this._cardObserver=new MutationObserver((t=>{for(const e of t)"attributes"!==e.type||"style"!==e.attributeName&&"hidden"!==e.attributeName||this._makeLayout()})))}async updated(t){var e;await super.updated(t),(t.has("_columns")||t.has("cards"))&&this._makeLayout(),t.has("_editMode")&&this._makeLayout(),(t.has("narrow")||t.has("hass")&&(null===(e=t.get("hass"))||void 0===e?void 0:e.dockedSidebar)!=this.hass.dockedSidebar)&&(this._updateSize(),this._makeLayout())}async firstUpdated(){var t,e,i,o,s,n,a,r,l,d,c,h,u,p,v,g;this._updateSize();const _=(null===(t=this._config.layout)||void 0===t?void 0:t.width)||300,f=(null===(e=this._config.layout)||void 0===e?void 0:e.max_width)||((null===(i=this._config.layout)||void 0===i?void 0:i.width)?Math.ceil(1.5*(null===(o=this._config.layout)||void 0===o?void 0:o.width)):500),m=(null===(s=this._config.layout)||void 0===s?void 0:s.width)?2*this._config.layout.width:600,y=document.createElement("style");y.innerHTML=`\n      :host {\n        --column-max-width: ${f}px;\n        --column-width: ${_}px;\n        --column-widths: ${null!==(a=null===(n=this._config.layout)||void 0===n?void 0:n.column_widths)&&void 0!==a?a:"none"};\n        --layout-margin: ${null!==(l=null===(r=this._config.layout)||void 0===r?void 0:r.margin)&&void 0!==l?l:"0px 4px 0px 4px"};\n        --layout-padding: ${null!==(c=null===(d=this._config.layout)||void 0===d?void 0:d.padding)&&void 0!==c?c:"4px 0px 4px 0px"};\n        --card-margin: ${null!==(u=null===(h=this._config.layout)||void 0===h?void 0:h.card_margin)&&void 0!==u?u:"var(--masonry-view-card-margin, 4px 4px 8px)"};\n        --layout-height: ${null!==(v=null===(p=this._config.layout)||void 0===p?void 0:p.height)&&void 0!==v?v:"auto"};\n        --layout-overflow: ${void 0!==(null===(g=this._config.layout)||void 0===g?void 0:g.height)?"auto":"visible"};\n      }\n      @media (max-width: ${f}px) {\n        .column:first-child > * {\n          margin-left: 0;\n        }\n        .column:last-child > * {\n          margin-right: 0;\n        }\n      }\n      @media (max-width: ${m-1}px) {\n        .column {\n          --column-max-width: ${m}px;\n        }\n      }\n    `,this.shadowRoot.appendChild(y)}connectedCallback(){super.connectedCallback(),this._updateSize()}disconnectedCallback(){super.disconnectedCallback(),this._observer.disconnect()}async _updateSize(){var t,e,i;let o=this.getBoundingClientRect().width,s=0;s=Math.floor(o/((null===(t=this._config.layout)||void 0===t?void 0:t.width)||300)),s=Math.min(s,(null===(e=this._config.layout)||void 0===e?void 0:e.max_cols)||("docked"===(null===(i=this.hass)||void 0===i?void 0:i.dockedSidebar)?3:4)),s=Math.max(s,1),s!==this._columns&&(this._columns=s)}_shouldShow(t,e,i){var o;if(!super._shouldShow(t,e,i))return!1;if(null===(o=this._config.layout)||void 0===o?void 0:o.reflow){if("none"===getComputedStyle(t).display)return!1;if(!0===t.hidden)return!1}const s=this._mediaQueries[i];return!s||!!s.matches}isBreak(t){return"layout-break"===t.localName}async _makeLayout(){this._makeColumnLayout()}async _makeColumnLayout(){var t;if(this._observer.disconnect(),this._cardObserver&&this._cardObserver.disconnect(),!this._columns)return;let e=[];for(let t=0;t<this._columns;t++){const t=document.createElement("div");t.classList.add("column"),t.length=0,e.push(t)}let i=this.cards.map(((t,e)=>{const i=this._config.cards[e];return{card:t,config:i,index:e,show:this._shouldShow(t,i,e)}}));await this._placeColumnCards(e,i.filter((t=>{var e;return(null===(e=this.lovelace)||void 0===e?void 0:e.editMode)||t.show}))),e=e.filter((t=>t.childElementCount>0)),(null===(t=this._config.layout)||void 0===t?void 0:t.rtl)&&e.reverse();const o=this.shadowRoot.querySelector("#columns");for(;o.firstChild;)o.removeChild(o.firstChild);if(this._cardObserver)for(const t of this.cards)this._cardObserver.observe(t,{attributes:!0});for(const t of e)o.appendChild(t);this.requestUpdate(),await this.updateComplete,this._observer.observe(this)}async _placeColumnCards(t,e){}render(){return U`
       <div id="columns"></div>
       ${this._render_fab()}
     `}static get styles(){return[this._fab_styles,n`
@@ -44,7 +43,7 @@ function t(t,e,i,o){var s,n=arguments.length,a=n<3?e:null===o?o=Object.getOwnPro
           display: block;
           margin: var(--card-margin);
         }
-      `]}}t([tt()],Mt.prototype,"_columns",void 0),t([tt()],Mt.prototype,"_config",void 0);customElements.define("masonry-layout",class extends Mt{async _placeColumnCards(t,e){var i;const o=(null===(i=this._config.layout)||void 0===i?void 0:i.min_height)||5;function s(){let e=0;for(let i=0;i<t.length;i++){if(t[i].length&&t[i].length<o)return t[i];t[i].length<t[e].length&&(e=i)}return t[e]}for(const t of e){const e=s();e.appendChild(this.getCardElement(t)),e.length+=t.card.getCardSize?await Promise.race([t.card.getCardSize(),new Promise((t=>setTimeout((()=>t(1)),500)))]):1}}});customElements.define("horizontal-layout",class extends Mt{async _placeColumnCards(t,e){var i,o;let s=0;for(const n of e){s+=1,(null===(i=n.config.view_layout)||void 0===i?void 0:i.column)&&(s=n.config.view_layout.column);const e=t[(s-1)%t.length];e.appendChild(this.getCardElement(n)),this.isBreak(n.card)&&(s=0,(null===(o=this.lovelace)||void 0===o?void 0:o.editMode)||e.removeChild(n.card))}}});customElements.define("vertical-layout",class extends Mt{async _placeColumnCards(t,e){var i;let o=1;for(const s of e){(null===(i=s.config.view_layout)||void 0===i?void 0:i.column)&&(o=s.config.view_layout.column);t[(o-1)%t.length].appendChild(this.getCardElement(s)),this.isBreak(s.card)&&(o+=1)}}});class Tt extends HTMLElement{setConfig(){this.style.display="none";const t=document.createElement("ha-card");t.innerHTML="BREAK",t.style.cssText="\n      background: red;\n      text-align: center;\n      font-size: large;\n      color: white;\n      padding: 16px;\n      ",this.appendChild(t)}getCardSize(){return 0}set editMode(t){this.style.display=t?"block":"none"}static getConfigElement(){return document.createElement("layout-break-editor")}static getStubConfig(){return{}}}customElements.define("layout-break",Tt),window.customCards=window.customCards||[],window.customCards.push({type:"layout-break",name:"Layout Break",preview:!1,description:"Forces a break in the layout flow. For use with layout-card or special layouts."});class Ot extends HTMLElement{setConfig(t){const e=document.createElement("div");e.innerHTML="BREAK",this.appendChild(e)}}customElements.define("layout-break-editor",Ot);customElements.define("grid-layout",class extends St{constructor(){super(...arguments),this._mediaQueries=[],this._layoutMQs=[]}async setConfig(t){var e,i,o,s,n;await super.setConfig(t);for(const t of this._config.cards)if("string"!=typeof(null===(e=t.view_layout)||void 0===e?void 0:e.show)&&(null===(o=null===(i=t.view_layout)||void 0===i?void 0:i.show)||void 0===o?void 0:o.mediaquery)){const e=window.matchMedia(`${t.view_layout.show.mediaquery}`);this._mediaQueries.push(e),e.addEventListener("change",(()=>this._placeCards()))}else this._mediaQueries.push(null);if(null===(s=this._config.layout)||void 0===s?void 0:s.mediaquery)for(const[t,e]of Object.entries(null===(n=this._config.layout)||void 0===n?void 0:n.mediaquery)){const e=window.matchMedia(t);this._layoutMQs.push(e),e.addEventListener("change",(()=>this._setGridStyles()))}this._setGridStyles()}async updated(t){await super.updated(t),(t.has("cards")||t.has("_editMode"))&&this._placeCards()}async firstUpdated(){var t,e,i,o,s,n,a;this._setGridStyles();const r=document.createElement("style");r.innerHTML=`\n      :host {\n        --layout-margin: ${null!==(e=null===(t=this._config.layout)||void 0===t?void 0:t.margin)&&void 0!==e?e:"4px 4px 0px 4px"};\n        --layout-padding: ${null!==(o=null===(i=this._config.layout)||void 0===i?void 0:i.padding)&&void 0!==o?o:"0px"};\n        --layout-height: ${null!==(n=null===(s=this._config.layout)||void 0===s?void 0:s.height)&&void 0!==n?n:"auto"};\n        --layout-overflow: ${void 0!==(null===(a=this._config.layout)||void 0===a?void 0:a.height)?"auto":"visible"};\n      }`,this.shadowRoot.appendChild(r)}_setGridStyles(){var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#root");if(!e)return;const i=t=>{for(const[i,o]of Object.entries(t))(i.startsWith("grid")||"grid"===i||"place-items"===i||"place-content"===i)&&e.style.setProperty(i,o)};e.style.cssText="",this._config.layout&&i(this._config.layout);for(const t of this._layoutMQs)if(t.matches){i(this._config.layout.mediaquery[t.media]);break}}_shouldShow(t,e,i){if(!super._shouldShow(t,e,i))return!1;const o=this._mediaQueries[i];return!o||!!o.matches}_placeCards(){var t,e;const i=this.shadowRoot.querySelector("#root");for(;i.firstChild;)i.removeChild(i.firstChild);let o=this.cards.map(((t,e)=>{const i=this._config.cards[e];return{card:t,config:i,index:e,show:this._shouldShow(t,i,e)}}));for(const s of o.filter((t=>{var e;return(null===(e=this.lovelace)||void 0===e?void 0:e.editMode)||t.show}))){const o=this.getCardElement(s);for(const[i,n]of Object.entries(null!==(e=null===(t=s.config)||void 0===t?void 0:t.view_layout)&&void 0!==e?e:{}))(i.startsWith("grid")||"place-self"===i)&&o.style.setProperty(i,n);i.appendChild(o)}}render(){return U` <div id="root"></div>
+      `]}}t([tt()],Mt.prototype,"_columns",void 0),t([tt()],Mt.prototype,"_config",void 0);customElements.define("masonry-layout",class extends Mt{async _placeColumnCards(t,e){var i;const o=(null===(i=this._config.layout)||void 0===i?void 0:i.min_height)||5;function s(){let e=0;for(let i=0;i<t.length;i++){if(t[i].length&&t[i].length<o)return t[i];t[i].length<t[e].length&&(e=i)}return t[e]}for(const t of e){const e=s();e.appendChild(this.getCardElement(t)),e.length+=t.card.getCardSize?await Promise.race([t.card.getCardSize(),new Promise((t=>setTimeout((()=>t(1)),500)))]):1}}});customElements.define("horizontal-layout",class extends Mt{async _placeColumnCards(t,e){var i,o;let s=0;for(const n of e){s+=1,(null===(i=n.config.view_layout)||void 0===i?void 0:i.column)&&(s=n.config.view_layout.column);const e=t[(s-1)%t.length];e.appendChild(this.getCardElement(n)),this.isBreak(n.card)&&(s=0,(null===(o=this.lovelace)||void 0===o?void 0:o.editMode)||e.removeChild(n.card))}}});customElements.define("vertical-layout",class extends Mt{async _placeColumnCards(t,e){var i;let o=1;for(const s of e){(null===(i=s.config.view_layout)||void 0===i?void 0:i.column)&&(o=s.config.view_layout.column);t[(o-1)%t.length].appendChild(this.getCardElement(s)),this.isBreak(s.card)&&(o+=1)}}});class Tt extends HTMLElement{setConfig(){this.style.display="none";const t=document.createElement("ha-card");t.innerHTML="BREAK",t.style.cssText="\n      background: red;\n      text-align: center;\n      font-size: large;\n      color: white;\n      padding: 16px;\n      ",this.appendChild(t)}getCardSize(){return 0}set editMode(t){this.style.display=t?"block":"none"}static getConfigElement(){return document.createElement("layout-break-editor")}static getStubConfig(){return{}}}customElements.define("layout-break",Tt),window.customCards=window.customCards||[],window.customCards.push({type:"layout-break",name:"Layout Break",preview:!1,description:"Forces a break in the layout flow. For use with layout-card or special layouts."});class Ot extends HTMLElement{setConfig(t){const e=document.createElement("div");e.innerHTML="BREAK",this.appendChild(e)}}customElements.define("layout-break-editor",Ot);customElements.define("grid-layout",class extends St{constructor(){super(...arguments),this._mediaQueries=[],this._layoutMQs=[]}async setConfig(t){var e,i,o,s,n;await super.setConfig(t);for(const t of this._config.cards)if("string"!=typeof(null===(e=t.view_layout)||void 0===e?void 0:e.show)&&(null===(o=null===(i=t.view_layout)||void 0===i?void 0:i.show)||void 0===o?void 0:o.mediaquery)){const e=window.matchMedia(`${t.view_layout.show.mediaquery}`);this._mediaQueries.push(e),e.addEventListener("change",(()=>this._placeCards()))}else this._mediaQueries.push(null);if(null===(s=this._config.layout)||void 0===s?void 0:s.mediaquery)for(const[t,e]of Object.entries(null===(n=this._config.layout)||void 0===n?void 0:n.mediaquery)){const e=window.matchMedia(t);this._layoutMQs.push(e),e.addEventListener("change",(()=>this._setGridStyles()))}this._setGridStyles()}async updated(t){await super.updated(t),(t.has("cards")||t.has("_editMode"))&&this._placeCards()}async firstUpdated(){var t,e,i,o,s,n,a;this._setGridStyles();const r=document.createElement("style");r.innerHTML=`\n      :host {\n        --layout-margin: ${null!==(e=null===(t=this._config.layout)||void 0===t?void 0:t.margin)&&void 0!==e?e:"0px 4px 0px 4px"};\n        --layout-padding: ${null!==(o=null===(i=this._config.layout)||void 0===i?void 0:i.padding)&&void 0!==o?o:"4px 0px 4px 0px"};\n        --layout-height: ${null!==(n=null===(s=this._config.layout)||void 0===s?void 0:s.height)&&void 0!==n?n:"auto"};\n        --layout-overflow: ${void 0!==(null===(a=this._config.layout)||void 0===a?void 0:a.height)?"auto":"visible"};\n      }`,this.shadowRoot.appendChild(r)}_setGridStyles(){var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("#root");if(!e)return;const i=t=>{for(const[i,o]of Object.entries(t))(i.startsWith("grid")||"grid"===i||"place-items"===i||"place-content"===i)&&e.style.setProperty(i,o)};e.style.cssText="",this._config.layout&&i(this._config.layout);for(const t of this._layoutMQs)if(t.matches){i(this._config.layout.mediaquery[t.media]);break}}_shouldShow(t,e,i){if(!super._shouldShow(t,e,i))return!1;const o=this._mediaQueries[i];return!o||!!o.matches}_placeCards(){var t,e;const i=this.shadowRoot.querySelector("#root");for(;i.firstChild;)i.removeChild(i.firstChild);let o=this.cards.map(((t,e)=>{const i=this._config.cards[e];return{card:t,config:i,index:e,show:this._shouldShow(t,i,e)}}));for(const s of o.filter((t=>{var e;return(null===(e=this.lovelace)||void 0===e?void 0:e.editMode)||t.show}))){const o=this.getCardElement(s);for(const[i,n]of Object.entries(null!==(e=null===(t=s.config)||void 0===t?void 0:t.view_layout)&&void 0!==e?e:{}))(i.startsWith("grid")||"place-self"===i)&&o.style.setProperty(i,n);i.appendChild(o)}}render(){return U` <div id="root"></div>
       ${this._render_fab()}`}static get styles(){return[this._fab_styles,n`
         :host {
           height: 100%;
diff --git a/src/layouts/base-column-layout.ts b/src/layouts/base-column-layout.ts
index 19039ad..ef15ba1 100644
--- a/src/layouts/base-column-layout.ts
+++ b/src/layouts/base-column-layout.ts
@@ -90,8 +90,8 @@ export class BaseColumnLayout extends BaseLayout {
         --column-max-width: ${column_max_width}px;
         --column-width: ${column_width}px;
         --column-widths: ${this._config.layout?.column_widths ?? "none"};
-        --layout-margin: ${this._config.layout?.margin ?? "4px 4px 0px 4px"};
-        --layout-padding: ${this._config.layout?.padding ?? "0px"};
+        --layout-margin: ${this._config.layout?.margin ?? "0px 4px 0px 4px"};
+        --layout-padding: ${this._config.layout?.padding ?? "4px 0px 4px 0px"};
         --card-margin: ${
           this._config.layout?.card_margin ??
           "var(--masonry-view-card-margin, 4px 4px 8px)"
diff --git a/src/layouts/base-layout.ts b/src/layouts/base-layout.ts
index e440122..192cbee 100644
--- a/src/layouts/base-layout.ts
+++ b/src/layouts/base-layout.ts
@@ -90,8 +90,7 @@ export class BaseLayout extends LitElement {
   static get _fab_styles() {
     return css`
       ha-fab {
-        position: sticky;
-        float: right;
+        position: fixed;
         right: calc(16px + env(safe-area-inset-right));
         bottom: calc(16px + env(safe-area-inset-bottom));
         z-index: 1;
diff --git a/src/layouts/grid.ts b/src/layouts/grid.ts
index 5a10cab..9622c13 100644
--- a/src/layouts/grid.ts
+++ b/src/layouts/grid.ts
@@ -53,8 +53,8 @@ class GridLayout extends BaseLayout {
     const styleEl = document.createElement("style");
     styleEl.innerHTML = `
       :host {
-        --layout-margin: ${this._config.layout?.margin ?? "4px 4px 0px 4px"};
-        --layout-padding: ${this._config.layout?.padding ?? "0px"};
+        --layout-margin: ${this._config.layout?.margin ?? "0px 4px 0px 4px"};
+        --layout-padding: ${this._config.layout?.padding ?? "4px 0px 4px 0px"};
         --layout-height: ${this._config.layout?.height ?? "auto"};
         --layout-overflow: ${
           this._config.layout?.height !== undefined ? "auto" : "visible"