Always render groups/areas in a single column (#10655)

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -176,7 +176,18 @@ export const computeCards = (
     });
   }
 
-  return cards;
+  if (cards.length < 2) {
+    return cards;
+  }
+
+  return [
+    {
+      type: "grid",
+      square: false,
+      columns: 1,
+      cards,
+    },
+  ];
 };
 
 const computeDefaultViewStates = (

src/panels/lovelace/create-element/create-card-element.ts

@@ -5,11 +5,10 @@ import "../cards/hui-entities-card";
 import "../cards/hui-entity-button-card";
 import "../cards/hui-entity-card";
 import "../cards/hui-glance-card";
-import "../cards/hui-horizontal-stack-card";
+import "../cards/hui-grid-card";
 import "../cards/hui-light-card";
 import "../cards/hui-sensor-card";
 import "../cards/hui-thermostat-card";
-import "../cards/hui-vertical-stack-card";
 import "../cards/hui-weather-forecast-card";
 import {
   createLovelaceElement,
@@ -23,59 +22,59 @@ const ALWAYS_LOADED_TYPES = new Set([
   "button",
   "entity-button",
   "glance",
-  "horizontal-stack",
+  "grid",
   "light",
   "sensor",
   "thermostat",
-  "vertical-stack",
   "weather-forecast",
 ]);
 
 const LAZY_LOAD_TYPES = {
   "alarm-panel": () => import("../cards/hui-alarm-panel-card"),
   area: () => import("../cards/hui-area-card"),
-  error: () => import("../cards/hui-error-card"),
+  calendar: () => import("../cards/hui-calendar-card"),
+  conditional: () => import("../cards/hui-conditional-card"),
   "empty-state": () => import("../cards/hui-empty-state-card"),
-  "energy-usage-graph": () =>
-    import("../cards/energy/hui-energy-usage-graph-card"),
-  "energy-solar-graph": () =>
-    import("../cards/energy/hui-energy-solar-graph-card"),
-  "energy-gas-graph": () => import("../cards/energy/hui-energy-gas-graph-card"),
-  "energy-devices-graph": () =>
-    import("../cards/energy/hui-energy-devices-graph-card"),
-  "energy-sources-table": () =>
-    import("../cards/energy/hui-energy-sources-table-card"),
-  "energy-distribution": () =>
-    import("../cards/energy/hui-energy-distribution-card"),
-  "energy-solar-consumed-gauge": () =>
-    import("../cards/energy/hui-energy-solar-consumed-gauge-card"),
-  "energy-grid-neutrality-gauge": () =>
-    import("../cards/energy/hui-energy-grid-neutrality-gauge-card"),
   "energy-carbon-consumed-gauge": () =>
     import("../cards/energy/hui-energy-carbon-consumed-gauge-card"),
   "energy-date-selection": () =>
     import("../cards/energy/hui-energy-date-selection-card"),
-  grid: () => import("../cards/hui-grid-card"),
+  "energy-devices-graph": () =>
-  starting: () => import("../cards/hui-starting-card"),
+    import("../cards/energy/hui-energy-devices-graph-card"),
+  "energy-distribution": () =>
+    import("../cards/energy/hui-energy-distribution-card"),
+  "energy-gas-graph": () => import("../cards/energy/hui-energy-gas-graph-card"),
+  "energy-grid-neutrality-gauge": () =>
+    import("../cards/energy/hui-energy-grid-neutrality-gauge-card"),
+  "energy-solar-consumed-gauge": () =>
+    import("../cards/energy/hui-energy-solar-consumed-gauge-card"),
+  "energy-solar-graph": () =>
+    import("../cards/energy/hui-energy-solar-graph-card"),
+  "energy-sources-table": () =>
+    import("../cards/energy/hui-energy-sources-table-card"),
+  "energy-usage-graph": () =>
+    import("../cards/energy/hui-energy-usage-graph-card"),
   "entity-filter": () => import("../cards/hui-entity-filter-card"),
+  error: () => import("../cards/hui-error-card"),
+  gauge: () => import("../cards/hui-gauge-card"),
+  "history-graph": () => import("../cards/hui-history-graph-card"),
+  "horizontal-stack": () => import("../cards/hui-horizontal-stack-card"),
   humidifier: () => import("../cards/hui-humidifier-card"),
+  iframe: () => import("../cards/hui-iframe-card"),
+  logbook: () => import("../cards/hui-logbook-card"),
+  map: () => import("../cards/hui-map-card"),
+  markdown: () => import("../cards/hui-markdown-card"),
   "media-control": () => import("../cards/hui-media-control-card"),
   "picture-elements": () => import("../cards/hui-picture-elements-card"),
   "picture-entity": () => import("../cards/hui-picture-entity-card"),
   "picture-glance": () => import("../cards/hui-picture-glance-card"),
+  picture: () => import("../cards/hui-picture-card"),
   "plant-status": () => import("../cards/hui-plant-status-card"),
   "safe-mode": () => import("../cards/hui-safe-mode-card"),
   "shopping-list": () => import("../cards/hui-shopping-list-card"),
-  conditional: () => import("../cards/hui-conditional-card"),
+  starting: () => import("../cards/hui-starting-card"),
-  gauge: () => import("../cards/hui-gauge-card"),
-  "history-graph": () => import("../cards/hui-history-graph-card"),
   "statistics-graph": () => import("../cards/hui-statistics-graph-card"),
-  iframe: () => import("../cards/hui-iframe-card"),
+  "vertical-stack": () => import("../cards/hui-vertical-stack-card"),
-  map: () => import("../cards/hui-map-card"),
-  markdown: () => import("../cards/hui-markdown-card"),
-  picture: () => import("../cards/hui-picture-card"),
-  calendar: () => import("../cards/hui-calendar-card"),
-  logbook: () => import("../cards/hui-logbook-card"),
 };
 
 // This will not return an error card but will throw the error