Good faith PR - fix various issues mentioned in issues

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__playwright__browser_evaluate"
+    ]
+  }
+}

.github/workflows/release.yml

@@ -1,36 +1,32 @@
 name: Release
 
 on:
-  workflow_dispatch:
   push:
-    branches:
-      - 'master'
-    paths:
-      - 'VERSION'
+    tags:
+      - 'v*'
 
 jobs:
-  tag-and-release:
+  release:
     runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
+    permissions:
+      contents: write
+    env:
+      FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
 
-      - name: Set up Git
-        run: |
-          git config user.name "${{ github.actor }}"
-          git config user.email "${{ github.actor }}@users.noreply.github.com"
+    steps:
+      - uses: actions/checkout@v4
 
-      - name: Create Git Tag
-        id: create_tag
+      - name: Extract changelog section
+        id: changelog
         run: |
-          VERSION=$(cat VERSION)
-          git tag -a "v$VERSION" -m "Release $VERSION"
-          git push origin "v$VERSION"
+          VER="${GITHUB_REF_NAME#v}"
+          awk "/^## \[${VER}\]/{found=1; next} found && /^## \[/{exit} found{print}" CHANGELOG.md > /tmp/release_notes.md
+          if [ ! -s /tmp/release_notes.md ]; then
+            echo "No changelog entry found for ${GITHUB_REF_NAME}" > /tmp/release_notes.md
+          fi
 
-
-      - name: Create GitHub Release
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          VERSION=$(cat VERSION)
-          gh release create "v$VERSION" vertical-stack-in-card.js --title "Release v$VERSION" --generate-notes
+      - name: Create release
+        uses: softprops/action-gh-release@v2
+        with:
+          body_path: /tmp/release_notes.md
+          files: nested-lovelace-card.js

.gitignore

@@ -0,0 +1 @@
+.playwright-mcp/

CHANGELOG.md

@@ -0,0 +1,48 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+
+## [1.0.6]
+
+### Fixed
+
+- Vertical stacks no longer expand to fill all available space when a nested `horizontal-stack` card is present. This was caused by HA 2025.x setting `height: 100%` on horizontal-stack host elements — combined with our container also using `height: 100%`, child cards would resolve their height against the full grid-allocated height. Fixed by making vertical stacks content-driven (no explicit height), while horizontal stacks retain `height: 100%` to correctly fill their allocated grid row.
+
+## [1.0.5]
+
+### Fixed
+
+- Visual editor: adding new cards via the card picker now works correctly.
+
+### Added
+
+- Visual editor now has a toggle to switch between vertical and horizontal stacking without editing YAML.
+- Child card width and height can be controlled proportionally via `grid_options.columns` (horizontal mode) and `grid_options.rows` (vertical mode) on each child card.
+
+## [1.0.4]
+
+### Added
+
+- Horizontal toggle in the visual editor.
+- `getLayoutOptions()` support so `grid_options` works correctly in the sections dashboard.
+
+## [1.0.3]
+
+- Fix visual editor breaking card layout when child cards fire their own config-changed events.
+
+## [1.0.2]
+
+- Internal: move version script to a dedicated file for cross-platform compatibility.
+
+## [1.0.1]
+
+### Fixed
+
+- Config properties (`horizontal`, `styles`, `grid_options`, `visibility`, etc.) are no longer lost when saving the card through the visual editor.
+
+## [1.0.0]
+
+### Changed
+
+- Forked from the original vertical-stack-in-card. Card type stays `custom:vertical-stack-in-card` — no changes needed in your dashboards.

CLAUDE.md

@@ -0,0 +1,47 @@
+# nested-lovelace-card — Claude context
+
+## What this is
+
+A Home Assistant Lovelace custom card that nests multiple cards into a single container, stacked vertically or horizontally. Forked from [ofekashery/vertical-stack-in-card](https://github.com/ofekashery/vertical-stack-in-card).
+
+**The custom element is deliberately kept as `custom:vertical-stack-in-card`** so existing user dashboards require no changes when switching to this fork.
+
+## Key files
+
+| File | Purpose |
+|------|---------|
+| `nested-lovelace-card.js` | The entire card — single vanilla JS file, no build step |
+| `package.json` | Version source of truth |
+| `scripts/version.js` | Patches the version string in the JS file |
+| `CHANGELOG.md` | User-facing changelog, parsed by the release workflow |
+| `hacs.json` | HACS metadata |
+
+## Releasing a new version
+
+The only command you need:
+
+```bash
+npm version patch    # or minor / major
+git push origin main --follow-tags
+```
+
+This will:
+1. Bump the version in `package.json`
+2. Run `scripts/version.js` which patches the `Version: ${'x.x.x'}` string in `nested-lovelace-card.js`
+3. Create a git commit and tag
+4. The tag push triggers the GitHub Actions release workflow, which creates a GitHub Release with `nested-lovelace-card.js` as the artifact and pulls notes from `CHANGELOG.md`
+
+**Always add a `## [x.x.x]` entry to `CHANGELOG.md` before running `npm version`**, otherwise the release notes will just say "No changelog entry found".
+
+## Architecture
+
+No build pipeline. `nested-lovelace-card.js` is shipped as-is. Do not introduce dependencies that require bundling unless you also set up a build step and update the release workflow accordingly.
+
+## Known deferred work
+
+- `overflow: hidden` on the outer `ha-card` clips dropdown/popup elements from child cards (e.g. input_select). Needs a fix that doesn't break the border/radius hiding. Tracked in ofekashery/vertical-stack-in-card#179.
+- Spacing control between nested cards — tracked in [#1](https://github.com/Liquidmasl/nested-lovelace-card/issues/1).
+
+## Original repo issues already fixed
+
+- **Visual editor stripping config properties** (`horizontal`, `styles`, `grid_options`, `visibility`, etc.) — fixed in commit `0962c93`. Root cause: `getConfigElement()` intercepted `config-changed` events and only forwarded `type/title/cards`.

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2021 Ofek Ashery
+Copyright (c) 2026 Liquidmasl
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,68 +1,126 @@
-# Vertical Stack In Card
+# Nested Lovelace Card
 
-![Version](https://img.shields.io/github/v/release/ofekashery/vertical-stack-in-card)
-![Downloads](https://img.shields.io/github/downloads/ofekashery/vertical-stack-in-card/total)
-![Stars](https://img.shields.io/github/stars/ofekashery/vertical-stack-in-card)
-![HACS](https://img.shields.io/badge/HACS-Default-41BDF5.svg)
+![Version](https://img.shields.io/github/v/release/Liquidmasl/nested-lovelace-card)
+![Downloads](https://img.shields.io/github/downloads/Liquidmasl/nested-lovelace-card/total)
+![Stars](https://img.shields.io/github/stars/Liquidmasl/nested-lovelace-card)
+![HACS](https://img.shields.io/badge/HACS-Custom-41BDF5.svg)
 
-**Vertical Stack In Card** is a custom Lovelace card for Home Assistant, allowing you to group multiple cards into a single sleek card. It offers a clean, organized way to display multiple cards in your Home Assistant dashboard.
+**Nested Lovelace Card** is a custom Lovelace card for Home Assistant that lets you group multiple cards into a single sleek card, stacked vertically or horizontally.
 
 ![Showcase Card](https://user-images.githubusercontent.com/16443111/220773923-c28009d6-edfc-4ffd-9290-3e0c6e1acf73.png)
 
+---
+
+## About this fork
+
+This is an actively maintained fork of the original [ofekashery/vertical-stack-in-card](https://github.com/ofekashery/vertical-stack-in-card), which has not seen updates in some time. Several bugs reported there have been fixed here.
+
+The card element is still registered as `custom:vertical-stack-in-card` so **existing dashboards keep working without any changes**.
+
+### Switching from the original
+
+1. In HACS, add this repository as a custom repository (type: **Dashboard**):
+   `https://github.com/Liquidmasl/nested-lovelace-card`
+2. Install **Nested Lovelace Card** from there.
+3. Remove the old **Vertical Stack In Card** entry.
+4. **Empty cache and reload (ctrl-shift-r)**
+5. Your existing dashboard YAML does not need to change.
+
+---
+
 ## Configuration Options
 
 | Name         | Type    | Default | Description                                       |
 | ------------ | ------- | ------- | ------------------------------------------------- |
 | `type`       | string  | N/A     | Must be `custom:vertical-stack-in-card`.          |
 | `cards`      | list    | N/A     | List of cards to include.                         |
 | `title`      | string  | None    | Optional. Title displayed at the top of the card. |
-| `horizontal` | boolean | false   | Optional. Whatever stack cards horizontally.      |
+| `horizontal` | boolean | false   | Optional. Stack cards horizontally instead.       |
 | `styles`     | object  | None    | Optional. Add custom CSS for advanced styling.    |
 
+### Child card sizing with `grid_options`
+
+You can control how much space each child card takes up by adding `grid_options` to it.
+
+**Vertical stack — control height:**
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+  - type: entities
+    entities: [...]
+    grid_options:
+      rows: 2        # takes twice the space of a rows: 1 card
+  - type: gauge
+    entity: sensor.temperature
+    grid_options:
+      rows: 1
+```
+
+Cards without `rows` shrink to their natural content height. Cards with `rows` share the remaining space proportionally by their values. Height control only has a visible effect when the outer card has a fixed height allocated by the sections dashboard.
+
+**Horizontal stack — control width:**
+
+![Weather example showing irregular card widths](.github/assets/weather_example.png)
+
+```yaml
+type: custom:vertical-stack-in-card
+horizontal: true
+cards:
+  - type: weather-forecast
+    entity: weather.forecast_home
+    forecast_type: daily
+    grid_options:
+      columns: 3
+      rows: 2
+  - type: custom:mini-graph-card
+    entities:
+      - sensor.outside_temp
+```
+
+`columns` values are used as relative flex weights. Cards without `columns` default to equal width.
+
 ## Installation
 
-### Via HACS (Home Assistant Community Store)
+### Via HACS (recommended)
 
 1. Open HACS in Home Assistant.
-2. Search for "Vertical Stack In Card."
-3. Install and follow the setup instructions.
+2. Go to **Frontend** → three-dot menu → **Custom repositories**.
+3. Add `https://github.com/Liquidmasl/nested-lovelace-card` with type **Dashboard** as a custom repository.
+4. Search for "Nested Lovelace Card" and install it.
+
+If you used `Vertical Stack In Card`:
+5. Remove `Vertical Stack In Card` in HACS.
+6. Empty cache and reload (ctrl-shift-r)
+
+> Your existing dashboard YAML does not need to change.
 
 ### Manual Installation
 
-Download the [`vertical-stack-in-card.js`](https://raw.githubusercontent.com/ofekashery/vertical-stack-in-card/master/vertical-stack-in-card.js) into your `<config directory>/www` directory.
+Download [`nested-lovelace-card.js`](https://github.com/Liquidmasl/nested-lovelace-card/releases/latest/download/nested-lovelace-card.js) into your `<config>/www` directory.
 
 ```bash
-wget https://raw.githubusercontent.com/ofekashery/vertical-stack-in-card/master/vertical-stack-in-card.js
-mv vertical-stack-in-card.js /config/www/
+wget https://github.com/Liquidmasl/nested-lovelace-card/releases/latest/download/nested-lovelace-card.js
+mv nested-lovelace-card.js /config/www/
 ```
 
 #### Add resource reference
 
-If you configure Lovelace via YAML, add a reference to `vertical-stack-in-card.js` inside your `configuration.yaml`:
+If you configure Lovelace via YAML, add a reference in your `configuration.yaml`:
 
 ```yaml
 resources:
-  - url: /local/vertical-stack-in-card.js?v=1.0.1
+  - url: /local/nested-lovelace-card.js?v=1.0.1
     type: js
 ```
 
-Alternatively, if you prefer the graphical editor, use the menu to add the resource.
-
-1. Make sure, **advanced mode** is enabled in your user profile (click on your user name to get there).
-
-2. Navigate to the **Configuration** -> **Lovelace Dashboards** -> **Resources**.
+Or via the UI: **Settings** → **Dashboards** → **Resources** → **Add resource**:
 
-3. Click on **Add resource**, and fill out the form as follows:
-
-   - **Url:** `/local/vertical-stack-in-card.js?v=1.0.1`
-   - **Resource type:** `JavaScript Module`
-
-4. Finish by clicking **Create** and refresh your browser.
+- **URL:** `/local/nested-lovelace-card.js?v=1.0.1`
+- **Resource type:** `JavaScript Module`
 
 ## Usage
 
-Add the card to your Lovelace UI configuration:
-
 ```yaml
 type: 'custom:vertical-stack-in-card'
 title: My Card
@@ -81,4 +139,4 @@ cards:
 
 ## Acknowledgements
 
-Thanks to [@ciotlosm](https://github.com/ciotlosm) and [@thomasloven](https://github.com/thomasloven) for their inspiration and contributions in building the foundation of this project.
+Thanks to [@ofekashery](https://github.com/ofekashery) for the original [vertical-stack-in-card](https://github.com/ofekashery/vertical-stack-in-card), and to [@ciotlosm](https://github.com/ciotlosm) and [@thomasloven](https://github.com/thomasloven) for their inspiration and contributions.

hacs.json

@@ -1,5 +1,6 @@
 {
-    "name": "Vertical Stack In Card",
+    "name": "Nested Lovelace Card",
     "render_readme": true,
-    "filename": "vertical-stack-in-card.js"
+    "filename": "nested-lovelace-card.js",
+    "homeassistant": "2021.3.0"
 }