From 798f732c3600ee2050bc0c69d9ab5656594f4bd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Eizedev?=
 <6794362+eizedev@users.noreply.github.com>
Date: Fri, 30 Oct 2026 17:49:06 +0100
Subject: [PATCH] fix: card height in sections views and SFP ports in narrow
 cards (0.1.2)

- getGridOptions asks for rows: auto; the fixed three rows cut off the trunks.
- The SFP ports wrap below the others when the card is too narrow; labels no longer widen a
  port.

Refs #8

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md               | 12 +++++++++++-
 package-lock.json          |  4 ++--
 package.json               |  2 +-
 src/managed-switch-card.ts | 19 +++++++++++++------
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bbaba7..e1be782 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,15 @@ All notable changes to this project are documented here. The format follows
 
 ## [Unreleased]
 
+## [0.1.2] - 2026-10-30
+
+### Fixed
+
+- In a sections view the card is as high as its ports and trunks need; the trunks no longer
+  overlap the next card.
+- In a narrow card (phones, three columns) the SFP ports move below the others instead of
+  covering the last ports; long device names no longer widen a port.
+
 ## [0.1.1] - 2026-10-30
 
 ### Changed
@@ -30,6 +39,7 @@ First release.
   tries again after 15 seconds and reads the ports again once the switch is back; it says when
   the integration is too old.
 
-[Unreleased]: https://github.com/eizedev/managed-switch-card/compare/v0.1.1...HEAD
+[Unreleased]: https://github.com/eizedev/managed-switch-card/compare/v0.1.2...HEAD
+[0.1.2]: https://github.com/eizedev/managed-switch-card/compare/v0.1.1...v0.1.2
 [0.1.1]: https://github.com/eizedev/managed-switch-card/compare/v0.1.0...v0.1.1
 [0.1.0]: https://github.com/eizedev/managed-switch-card/releases/tag/v0.1.0
diff --git a/package-lock.json b/package-lock.json
index 93595d7..100f37d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "managed-switch-card",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "managed-switch-card",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "license": "MIT",
       "devDependencies": {
         "@types/node": "^24.19.2",
diff --git a/package.json b/package.json
index d90e1b6..9c4101d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "managed-switch-card",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Lovelace card that draws a managed switch's front panel from the Managed Switch (SNMP) Home Assistant integration",
   "license": "MIT",
   "private": true,
diff --git a/src/managed-switch-card.ts b/src/managed-switch-card.ts
index 7509130..e9cc764 100644
--- a/src/managed-switch-card.ts
+++ b/src/managed-switch-card.ts
@@ -77,8 +77,9 @@ export class ManagedSwitchCard extends LitElement {
     return cardSize(layoutFor(reply, this._config?.layout), trunks);
   }
 
-  getGridOptions(): Record<string, number> {
-    return { columns: 12, min_columns: 6, rows: 3 };
+  /** In a sections view: full width, as high as the ports and trunks need. */
+  getGridOptions(): Record<string, number | string> {
+    return { columns: 12, min_columns: 6, rows: "auto" };
   }
 
   protected override updated(changed: PropertyValues): void {
@@ -246,13 +247,15 @@ export class ManagedSwitchCard extends LitElement {
       border-radius: 10px;
       background: var(--secondary-background-color);
       overflow-x: auto;
+      /* the SFP ports move below the others when the card is too narrow for both */
+      flex-wrap: wrap;
     }
     .rows {
       display: flex;
       flex-direction: column;
       gap: 8px;
-      flex: 1 1 auto;
-      min-width: 0;
+      flex: 1 1 0;
+      min-width: min-content;
     }
     .row {
       display: flex;
@@ -348,7 +351,10 @@ export class ManagedSwitchCard extends LitElement {
     }
     .name {
       font-weight: 500;
-      max-width: 100%;
+      /* as wide as the port, however long the text: it does not widen the port */
+      width: 0;
+      min-width: 100%;
+      text-align: center;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -357,7 +363,8 @@ export class ManagedSwitchCard extends LitElement {
     .rate {
       color: var(--secondary-text-color);
       text-align: center;
-      max-width: 100%;
+      width: 0;
+      min-width: 100%;
       font-size: 0.9em;
       overflow: hidden;
       text-overflow: ellipsis;