Improve mobile viewport sizing and narrow-screen layout behavior

app/src/App.tsx

@@ -380,8 +380,8 @@ export default function App() {
   return (
     <div className="relative font-sans">
       <GTM />
-      <main className="h-[100dvh]">
-        <div className='md:flex md:flex-col hidden h-screen' id='desktop'>
+      <main className="h-[100dvh] min-h-[100svh]">
+        <div className='hidden h-full min-h-0 md:flex md:flex-col' id='desktop'>
           <header className="flex flex-col text-xl">
             <div className="flex items-center justify-between py-2 px-4 border-b border-border">
               <div className="flex gap-4 items-center">
@@ -517,7 +517,7 @@ export default function App() {
           </header>
           <Suspense fallback={<div className="flex items-center justify-center h-full">Loading...</div>}>
             <PanelGroup direction="horizontal" className="w-full h-full">
-              <Panel defaultSize={graph.Id ? 70 : 100} className="flex flex-col" minSize={50}>
+              <Panel defaultSize={graph.Id ? 70 : 100} className="flex min-w-0 flex-col" minSize={50}>
                 <CodeGraph
                   id="desktop"
                   graph={graph}
@@ -551,7 +551,7 @@ export default function App() {
               <PanelResizeHandle className={cn(!graph.Id && 'hidden', 'w-1 bg-border hover:bg-primary/50 transition-colors')} />
               <Panel
                 ref={chatPanel}
-                className="border-l"
+                className="min-w-0 border-l"
                 defaultSize={graph.Id ? 30 : 0}
                 minSize={30}
                 maxSize={50}
@@ -580,7 +580,7 @@ export default function App() {
             </PanelGroup>
           </Suspense>
         </div>
-        <div className='flex flex-col md:hidden h-full overflow-hidden' id='mobile'>
+        <div className='flex h-full min-h-0 flex-col overflow-hidden md:hidden' id='mobile'>
           <header className='flex justify-between items-center bg-muted py-2 px-4'>
             <a href="https://www.falkordb.com" target='_blank' rel="noopener noreferrer" aria-label="FalkorDB" className="flex gap-2 items-center">
               <Logo width={40} height={34} />
@@ -644,7 +644,7 @@ export default function App() {
             </div>
           )}
           <Suspense fallback={<div className="flex items-center justify-center h-full">Loading...</div>}>
-            <div className='flex flex-col grow'>
+            <div className='flex min-h-0 grow flex-col'>
               <CodeGraph
                 id="mobile"
                 graph={graph}
@@ -682,7 +682,7 @@ export default function App() {
                         Chat
                       </Button>
                     </DrawerTrigger>
-                    <DrawerContent handleClassName='bg-muted-foreground h-1' className='md:hidden flex flex-col h-[90dvh]'>
+                    <DrawerContent handleClassName='bg-muted-foreground h-1' className='md:hidden flex min-h-0 flex-col h-[90svh] max-h-[90svh]'>
                       <VisuallyHidden>
                         <DrawerTitle />
                         <DrawerDescription />

app/src/components/chat.tsx

@@ -626,8 +626,8 @@ export function Chat({ messages, setMessages, query, setQuery, selectedPath, set
     }
 
     return (
-        <div className="relative h-1 grow md:h-full flex flex-col justify-between px-6 pt-10 pb-4 gap-4">
-            <main data-name="main-chat" ref={containerRef} className="grow flex flex-col overflow-y-auto gap-6 px-4">
+        <div className="relative h-1 grow min-h-0 md:h-full flex flex-col justify-between px-6 pt-10 pb-4 gap-4">
+            <main data-name="main-chat" ref={containerRef} className="grow min-h-0 flex flex-col overflow-y-auto gap-6 px-4">
                 {
                     messages.length === 0 &&
                     <>

app/src/components/code-graph.tsx

@@ -347,7 +347,7 @@ export function CodeGraph({
     }
 
     return (
-        <div className="grow md:h-full w-full flex flex-col gap-4 p-4 pt-0 md:p-8 md:bg-muted">
+        <div className="grow md:h-full w-full min-h-0 flex flex-col gap-4 p-4 pt-0 md:p-8 md:bg-muted">
             <header className="flex flex-col gap-4 relative">
                 <div className="absolute md:hidden inset-x-0 top-8 h-[50%] bg-muted -mx-8 -mt-8 px-8 border-b border-border" />
                 <Combobox
@@ -357,8 +357,8 @@ export function CodeGraph({
                     onSelectedValue={handleSelectedValue}
                 />
             </header>
-            <div className='h-1 grow flex flex-col'>
-                <main ref={containerRef} className="bg-background h-1 grow">
+            <div className='h-1 grow min-h-0 flex flex-col'>
+                <main ref={containerRef} className="bg-background h-1 grow min-h-0">
                     {
                         graph.Id ?
                             <div className="h-full relative border flex flex-col md:block">

app/src/components/combobox.tsx

@@ -58,10 +58,10 @@ export default function Combobox({ options, setOptions, selectedValue, onSelecte
 
     return (
         <Select open={open} onOpenChange={setOpen} value={selectedValue} onValueChange={onSelectedValue}>
-            <SelectTrigger className="z-10 md:z-0 rounded-md border border-border focus:ring-1 focus:ring-primary">
+            <SelectTrigger className="z-10 -mx-2 w-[calc(100%+1rem)] rounded-md border border-border focus:ring-1 focus:ring-primary md:z-0 md:mx-0 md:w-full">
                 <SelectValue placeholder="Select a repo" />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="max-w-[calc(100vw-1rem)]">
                 {
                     options.length !== 0 &&
                     options.map((option) => (

e2e/tests/responsive.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from "@playwright/test";
+import BrowserWrapper from "../infra/ui/browserWrapper";
+import CodeGraph from "../logic/POM/codeGraph";
+import urls from "../config/urls.json";
+
+const baseUrl = process.env.CODE_GRAPH_BASE_URL || urls.baseUrl;
+
+test.describe("Responsive layout tests", () => {
+  let browser: BrowserWrapper;
+
+  test.beforeAll(async () => {
+    browser = new BrowserWrapper();
+  });
+
+  test.afterAll(async () => {
+    await browser.closeBrowser();
+  });
+
+  test("keeps the mobile selector wide and fills the visible viewport height", async () => {
+    await browser.createNewPage(CodeGraph);
+    const page = await browser.getPage();
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await browser.navigateTo(baseUrl);
+
+    const selectorMetrics = await page.locator('#mobile [role="combobox"]').evaluate((element) => {
+      const rect = element.getBoundingClientRect();
+
+      return {
+        width: rect.width,
+        left: rect.left,
+        right: rect.right,
+        viewportWidth: window.innerWidth,
+      };
+    });
+
+    expect(selectorMetrics.width).toBeGreaterThanOrEqual(selectorMetrics.viewportWidth - 24);
+    expect(selectorMetrics.left).toBeLessThanOrEqual(12);
+    expect(selectorMetrics.right).toBeGreaterThanOrEqual(selectorMetrics.viewportWidth - 12);
+
+    const heightMetrics = await page.evaluate(() => {
+      const root = document.getElementById("root");
+      const main = document.querySelector("main");
+
+      return {
+        viewportHeight: window.innerHeight,
+        rootHeight: root?.getBoundingClientRect().height ?? 0,
+        mainHeight: main?.getBoundingClientRect().height ?? 0,
+      };
+    });
+
+    expect(Math.abs(heightMetrics.rootHeight - heightMetrics.viewportHeight)).toBeLessThanOrEqual(1);
+    expect(Math.abs(heightMetrics.mainHeight - heightMetrics.viewportHeight)).toBeLessThanOrEqual(1);
+  });
+});