Fix IDELayout when resizing with form content on a tab (#339)

The panels were collapsing when resized to small sizes with a form open

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

console/client/src/App.tsx

@@ -1,5 +1,4 @@
 import {Route, Routes} from 'react-router-dom'
-import {Navigation} from './components/Navigation.tsx'
 import GraphPage from './features/graph/GraphPage.tsx'
 import {IDELayout} from './layout/IDELayout.tsx'
 import {bgColor, textColor} from './utils/style.utils.ts'
@@ -9,7 +8,6 @@ export default function App() {
     <div
       className={`h-screen flex flex-col min-w-[1024px] min-h-[600px] ${bgColor} ${textColor}`}
     >
-      <Navigation />
       <Routes>
         <Route
           index

console/client/src/features/graph/GraphPage.tsx

@@ -10,6 +10,7 @@ import {modulesContext} from '../../providers/modules-provider'
 import {GroupNode} from './GroupNode'
 import {VerbNode} from './VerbNode'
 import {layoutNodes} from './create-layout'
+import {Navigation} from '../../components/Navigation'
 
 const nodeTypes = {groupNode: GroupNode, verbNode: VerbNode}
 
@@ -25,18 +26,21 @@ export default function GraphPage() {
   }, [modules, setEdges, setNodes])
 
   return (
-    <div style={{width: '100vw', height: '100vh'}}>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        fitView
-      >
-        <Controls />
-        <MiniMap />
-      </ReactFlow>
-    </div>
+    <>
+      <Navigation />
+      <div style={{width: '100vw', height: '100vh'}}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          fitView
+        >
+          <Controls />
+          <MiniMap />
+        </ReactFlow>
+      </div>
+    </>
   )
 }

console/client/src/layout/IDELayout.tsx

@@ -13,11 +13,19 @@ import {
   TabsContext,
   timelineTab,
 } from '../providers/tabs-provider'
-import {headerColor, headerTextColor, panelColor, invalidTab} from '../utils'
+import {
+  headerColor,
+  headerTextColor,
+  panelColor,
+  invalidTab,
+  bgColor,
+  textColor,
+} from '../utils'
 import {SidePanel} from './SidePanel'
 import {Notification} from '../components/Notification'
 import {useClient} from '../hooks/use-client'
 import {ConsoleService} from '../protos/xyz/block/ftl/v1/console/console_connect'
+import {Navigation} from '../components/Navigation'
 const selectedTabStyle = `${headerTextColor} ${headerColor}`
 const unselectedTabStyle = `text-gray-300 bg-slate-100 dark:bg-slate-600`
 
@@ -107,102 +115,106 @@ export function IDELayout() {
   }, [id, type])
 
   return (
-    <>
-      {/* Main Content */}
-      <div className='flex flex-grow overflow-hidden'>
+    <div className={`h-screen flex flex-col ${bgColor} ${textColor}`}>
+      <Navigation />
+
+      <div className='flex-grow flex overflow-hidden p-1'>
         {/* Left Column */}
-        <div className='flex flex-col w-1/4 h-full overflow-hidden'>
-          {/* Upper Section */}
+        <aside className={`w-80 flex flex-col`}>
+          {/* Top Section */}
           <div
-            className={`flex-1 flex flex-col h-1/3 ${panelColor} ml-2 mt-2 rounded`}
+            className={`flex flex-col h-1/2 overflow-hidden rounded-t ${panelColor}`}
           >
-            <div
-              className={`px-4 py-2 rounded-t ${headerTextColor} ${headerColor}`}
-            >
+            <header className={`px-4 py-2 ${headerTextColor} ${headerColor}`}>
               Modules
-            </div>
-            <div className='flex-1 p-4 overflow-y-auto'>
+            </header>
+            <section className={`${panelColor} p-4 overflow-y-auto`}>
               <ModulesList />
-            </div>
+            </section>
           </div>
 
-          {/* Lower Section */}
+          {/* Bottom Section */}
           <div
-            className={`flex-1 flex flex-col ${panelColor} ml-2 mt-2 mb-2 rounded`}
+            className={`flex flex-col h-1/2 overflow-hidden mt-1 rounded-t ${panelColor}`}
           >
-            <div
-              className={`px-4 py-2 rounded-t ${headerTextColor} ${headerColor}`}
-            >
+            <header className={`px-4 py-2 ${headerTextColor} ${headerColor}`}>
               Module Details
-            </div>
-            <div className='flex-1 p-4 overflow-y-auto'>
+            </header>
+            <section className={`${panelColor} p-4 overflow-y-auto`}>
               <ModuleDetails />
-            </div>
+            </section>
           </div>
-        </div>
+        </aside>
 
-        <div className={`flex-1 flex flex-col m-2 rounded`}>
-          <Tab.Group
-            selectedIndex={activeIndex}
-            onChange={handleChangeTab}
-          >
-            <div>
-              <Tab.List
-                className={`flex items-center rounded-t ${headerTextColor}`}
-              >
-                {tabs.map(({label, id}, i) => {
-                  return (
-                    <Tab
-                      key={id}
-                      className='flex items-center mr-2 relative'
-                      as='span'
+        {/* Main Content */}
+        <main className='flex-grow flex flex-col overflow-hidden pl-1'>
+          <section className='flex-grow overflow-y-auto'>
+            <div className='flex flex-grow overflow-hidden h-full'>
+              <div className={`flex-1 flex flex-col rounded`}>
+                <Tab.Group
+                  selectedIndex={activeIndex}
+                  onChange={handleChangeTab}
+                >
+                  <div>
+                    <Tab.List
+                      className={`flex items-center rounded-t ${headerTextColor}`}
                     >
-                      <span
-                        className={`px-4 py-2 rounded-t ${
-                          id !== 'timeline' ? 'pr-8' : ''
-                        } ${
-                          activeIndex === i
-                            ? `${selectedTabStyle}`
-                            : `${unselectedTabStyle}`
-                        }`}
-                      >
-                        {label}
-                      </span>
-                      {i !== 0 && (
-                        <button
-                          onClick={e => {
-                            e.stopPropagation()
-                            handleCloseTab(id, i)
-                          }}
-                          className='absolute right-0 mr-2 text-gray-400 hover:text-white'
-                        >
-                          <XMarkIcon className={`h-5 w-5`} />
-                        </button>
-                      )}
-                    </Tab>
-                  )
-                })}
-              </Tab.List>
-              <div className='flex-grow'></div>
-            </div>
-            <div className={`flex-1 overflow-y-scroll ${panelColor}`}>
-              <Tab.Panels>
-                {tabs.map(({id}, i) => {
-                  return i === 0 ? (
-                    <Tab.Panel key={id}>
-                      <Timeline />
-                    </Tab.Panel>
-                  ) : (
-                    <Tab.Panel key={id}>
-                      <VerbTab id={id} />
-                    </Tab.Panel>
-                  )
-                })}
-              </Tab.Panels>
+                      {tabs.map(({label, id}, i) => {
+                        return (
+                          <Tab
+                            key={id}
+                            className='flex items-center mr-2 relative'
+                            as='span'
+                          >
+                            <span
+                              className={`px-4 py-2 rounded-t ${
+                                id !== 'timeline' ? 'pr-8' : ''
+                              } ${
+                                activeIndex === i
+                                  ? `${selectedTabStyle}`
+                                  : `${unselectedTabStyle}`
+                              }`}
+                            >
+                              {label}
+                            </span>
+                            {i !== 0 && (
+                              <button
+                                onClick={e => {
+                                  e.stopPropagation()
+                                  handleCloseTab(id, i)
+                                }}
+                                className='absolute right-0 mr-2 text-gray-400 hover:text-white'
+                              >
+                                <XMarkIcon className={`h-5 w-5`} />
+                              </button>
+                            )}
+                          </Tab>
+                        )
+                      })}
+                    </Tab.List>
+                    <div className='flex-grow'></div>
+                  </div>
+                  <div className={`flex-1 overflow-y-scroll ${panelColor}`}>
+                    <Tab.Panels>
+                      {tabs.map(({id}, i) => {
+                        return i === 0 ? (
+                          <Tab.Panel key={id}>
+                            <Timeline />
+                          </Tab.Panel>
+                        ) : (
+                          <Tab.Panel key={id}>
+                            <VerbTab id={id} />
+                          </Tab.Panel>
+                        )
+                      })}
+                    </Tab.Panels>
+                  </div>
+                </Tab.Group>
+              </div>
+              <SidePanel />
             </div>
-          </Tab.Group>
-        </div>
-        <SidePanel />
+          </section>
+        </main>
       </div>
       {invalidTabMessage && (
         <Notification
@@ -214,6 +226,6 @@ export function IDELayout() {
           message={invalidTabMessage}
         />
       )}
-    </>
+    </div>
   )
 }

console/client/src/layout/SidePanel.tsx

@@ -24,7 +24,7 @@ export function SidePanel() {
         leaveTo='translate-x-full'
       >
         <div
-          className={`fixed right-0 w-1/3 h-full mt-2 ${sidePanelColor} shadow-xl`}
+          className={`fixed right-0 w-1/3 h-full ${sidePanelColor} shadow-xl`}
         >
           <div
             className={`flex items-center justify-between pl-4 pr-2 py-2 rounded-tl ${headerTextColor} ${headerColor}`}