Fix resizing reordered panels (#6011)

**Problem:**

A reordered panel that is the only element of a column cannot be
resized.

**Fix:**

When calculating non empty columns, take into account the visibility of
the column panels too, which would otherwise return a zombie column
index and mess up the resizing calculations.


https://github.com/concrete-utopia/utopia/assets/1081051/4b07009e-6849-4008-b1f8-8e3479126b2c

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

Fixes #6005

editor/src/components/canvas/grid-panels-container.tsx

@@ -15,20 +15,40 @@ import {
   useResolvedGridPanels,
   wrapAroundColIndex,
 } from './grid-panels-state'
-import type { LayoutUpdate, StoredPanel } from './stored-layout'
+import type { LayoutUpdate, PanelVisibility, StoredPanel } from './stored-layout'
 import {
   GridHorizontalExtraPadding,
   GridPanelHorizontalGapHalf,
   GridPanelVerticalGapHalf,
   GridVerticalExtraPadding,
   NumberOfColumns,
 } from './stored-layout'
+import { Substores, useEditorState } from '../editor/store/store-hook'
 
 export const GridPanelsContainer = React.memo(() => {
   const [panelState, setPanelState] = useGridPanelState()
 
   const orderedPanels = useResolvedGridPanels()
 
+  const panelVisibility = useEditorState(
+    Substores.restOfEditor,
+    (store): PanelVisibility => {
+      return {
+        navigator: store.editor.leftMenu.visible,
+        inspector: store.editor.rightMenu.visible,
+        'code-editor': store.editor.interfaceDesigner.codePaneVisible,
+      }
+    },
+    'GridPanelsContainer panelVisibility',
+  )
+
+  const isPanelVisible = React.useCallback(
+    (panel: StoredPanel): boolean => {
+      return panelVisibility[panel.name]
+    },
+    [panelVisibility],
+  )
+
   const nonEmptyColumns = React.useMemo(() => {
     return Array.from(
       accumulate(new Set<number>(), (acc: Set<number>) => {
@@ -37,13 +57,13 @@ export const GridPanelsContainer = React.memo(() => {
         acc.add(wrapAroundColIndex(NumberOfColumns - 1))
 
         panelState.forEach((column, colIndex) => {
-          if (column.panels.length > 0) {
+          if (column.panels.length > 0 && column.panels.some(isPanelVisible)) {
             acc.add(wrapAroundColIndex(colIndex))
           }
         })
       }),
     )
-  }, [panelState])
+  }, [panelState, isPanelVisible])
 
   const onDrop = React.useCallback(
     (itemToMove: StoredPanel, newPosition: LayoutUpdate) => {

editor/src/components/canvas/stored-layout.ts

@@ -41,6 +41,8 @@ export interface GridPanelData {
 
 export type PanelName = Menu | Pane
 
+export type PanelVisibility = Record<PanelName, boolean>
+
 export interface StoredPanel {
   name: PanelName
   type: 'menu' | 'pane'