Use padding for vertical layout spacing

Some adjustments
thomasloven · Feb 29, 2024 · e08d338 · e08d338
1 parent b63bf93
commit e08d338
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 9 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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"