fix: card height in sections views and SFP ports in narrow cards (0.1.2)

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

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,

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;