With the Maximize Wrapper Card, you can enlarge any card in a Home Assistant dashboard with a single click. The custom Lovelace card acts as a wrapper around an existing card and adds a button to maximize and restore it. This is especially useful for charts, floor plans, camera feeds, or other content that requires more space when needed.

Maximize Any Lovelace Card

The Maximize Wrapper Card works with any Lovelace card. When maximized, it preserves the header, sidebar, and footer of the current Home Assistant view. At the same time, scrolling of the dashboard is disabled in the background. When closed, the embedded card returns to its original position and size.

Key features include:

• any Lovelace card as content,
• Maximize and restore directly within the dashboard,
• proper alignment with the header, sidebar, and view footer,
• disabled background scrolling when maximized,
• separate grid heights for the normal and maximized views, and
• a visual editor for the embedded map.

Installation via HACS

1. In HACS, open the menu item to add a custom repository.
2. Enter the repository https://github.com/LiBe-net/max-wrapper and select " Dashboard " as the category.
3. Download the Maximize Wrapper Card.
4. Reload Home Assistant or your browser.

You can also open the repository directly in HACS using the following link:

Open Maximize Wrapper Card in HACS

HACS automatically registers the file `max-wrapper.min.js` as a Lovelace resource. The card will then be available in the visual dashboard editor.

Configuration

In the visual editor, you can select and configure the desired card directly as content. Alternatively, you can create the wrapper using YAML:

type: custom:maximize-wrapper-card
card:
  type: entities
  title: Beispiel
  entities:
    - entity: sensor.example

The entire content under `card:` corresponds to the configuration of the card to be maximized. Instead of an entity card, you can also use, for example, a statistics chart, a camera card, or a custom card here.

Different Heights When Maximized

For dashboard views in the Sections layout, the wrapper supports separate `grid_options`. ` grid_options ` defines the normal display, while `grid_options_full` supplements or overrides the settings for the maximized state:

type: custom:maximize-wrapper-card
grid_options:
  rows: 6
grid_options_full:
  rows: 12
card:
  type: statistics-graph
  entities:
    - sensor.example

In this example, the statistics chart in the dashboard occupies six rows and, after being maximized, twelve rows. Settings specified directly by the embedded chart take precedence.

Manual Installation

Without HACS, you can copy max-wrapper.min.js from the GitHub repository to /config/www/. Then, under Settings > Dashboards > Resources, create a new JavaScript module resource with the following path:

/local/max-wrapper.min.js

After reloading the browser, the card can be used with the type ` custom:maximize-wrapper-card `.

Download and Source Code

The source code, current releases, and further technical details are available on GitHub: github.com/LiBe-net/max-wrapper. The project is licensed under the MIT License.