Merge pull request #2711 from trycompai/fix/pentest-tablet-breakpoint

fix(pentest): tablet-friendly split-view (md → xl breakpoint)

Author: tofikwest

apps/app/src/app/(app)/[orgId]/security/penetration-tests/_components/LoadingShell.tsx

@@ -1,15 +1,16 @@
 /**
  * Shared loading skeleton for pentest routes. Mirrors the SplitView shell
- * one-to-one (full-bleed, 340px sidebar + main pane on desktop) so a hard
+ * one-to-one (full-bleed, 340px sidebar + main pane at xl+) so a hard
  * refresh transitions into the live page without a CLS jump.
  *
- * On mobile (<md) only ONE pane is rendered, picked by `variant` to match
- * the route the user is hard-refreshing on:
+ * Below xl (1280px) — phone, tablet, narrow laptop — only ONE pane is
+ * rendered, picked by `variant` to match the route the user is
+ * hard-refreshing on:
  *   - 'list'   — only the sidebar shape
  *   - 'detail' — only the main pane shape
  *   - 'create' — only the main pane shape
  *
- * Desktop always shows both. Pure JSX, no hooks — safe to consume from
+ * xl+ always shows both. Pure JSX, no hooks — safe to consume from
  * server-component `loading.tsx` files.
  */
 type Variant = 'list' | 'detail' | 'create';
@@ -28,8 +29,8 @@ export function LoadingShell({ variant, mainPane }: LoadingShellProps) {
     <div className="flex h-[calc(100vh-4rem)] min-h-0 -m-4 md:-m-6">
       <aside
         className={[
-          'flex h-full min-h-0 w-full md:w-[340px] md:shrink-0 flex-col border-r border-border bg-background',
-          showSidebarMobile ? 'flex' : 'hidden md:flex',
+          'flex h-full min-h-0 w-full xl:w-[340px] xl:shrink-0 flex-col border-r border-border bg-background',
+          showSidebarMobile ? 'flex' : 'hidden xl:flex',
         ].join(' ')}
         aria-hidden
       >
@@ -59,16 +60,16 @@ export function LoadingShell({ variant, mainPane }: LoadingShellProps) {
       <main
         className={[
           'min-w-0 flex-1 flex-col',
-          showMainMobile ? 'flex' : 'hidden md:flex',
+          showMainMobile ? 'flex' : 'hidden xl:flex',
         ].join(' ')}
       >
-        {/* Mobile-only back-bar skeleton on non-list routes. Matches the
-            "← Scans" bar that SplitView renders on detail/create URLs
-            below md — without this placeholder, resolving the page
-            shifts the main content down ~33px when the real bar mounts. */}
+        {/* Back-bar skeleton on non-list routes. Matches the "← Scans"
+            bar SplitView renders on detail/create URLs below xl —
+            without this placeholder, resolving the page shifts the
+            main content down ~33px when the real bar mounts. */}
         {variant !== 'list' && (
           <div
-            className="md:hidden flex items-center border-b border-border bg-background px-3 py-2"
+            className="xl:hidden flex items-center border-b border-border bg-background px-3 py-2"
             aria-hidden
           >
             <div className="h-4 w-16 rounded bg-muted animate-pulse" />

apps/app/src/app/(app)/[orgId]/security/penetration-tests/_components/RunList.tsx

@@ -36,7 +36,7 @@ export function RunList({
       : 'No pentest runs remaining.'
     : 'Start a new scan';
   return (
-    <aside className="flex h-full min-h-0 w-full md:w-[340px] md:shrink-0 flex-col border-r border-border bg-background">
+    <aside className="flex h-full min-h-0 w-full xl:w-[340px] xl:shrink-0 flex-col border-r border-border bg-background">
       {/* Header — matches "Scans  6   Filter  Sort" from the design */}
       <div className="flex items-center justify-between border-b border-border px-4 py-3">
         <button

apps/app/src/app/(app)/[orgId]/security/penetration-tests/_components/SplitView.tsx

@@ -133,10 +133,12 @@ export function SplitView({
   const goToList = () =>
     router.push(`/${orgId}/security/penetration-tests`);
 
-  // Mobile shows ONE pane at a time, picked from the URL. List on
-  // `/pentests`, main pane on `/pentests/:id` and `/pentests/new`. Below
-  // `md` we hide whichever isn't active so an IDE-style split doesn't
-  // collapse into ~200px columns. On desktop both are always shown.
+  // Below `xl` (1280px) we show ONE pane at a time, picked from the URL —
+  // list on `/pentests`, main on `/pentests/:id` and `/pentests/new`.
+  // The `xl` cutoff (not `md`) covers tablets and narrower laptops where
+  // the global rail + section sub-nav already eat ~345px before the
+  // SplitView even starts; below xl, the IDE-style split squeezes the
+  // main pane to <600px and the SevTally / detail header overflow.
   const showListOnMobile = selectedRunId === null && !isCreateMode;
 
   // Empty state only shown when there are no runs AND no selection AND not
@@ -163,8 +165,8 @@ export function SplitView({
       <div
         aria-hidden={isCreateMode}
         className={cn(
-          'w-full md:w-auto md:shrink-0',
-          showListOnMobile ? 'block' : 'hidden md:block',
+          'w-full xl:w-auto xl:shrink-0',
+          showListOnMobile ? 'block' : 'hidden xl:block',
           isCreateMode ? 'pointer-events-none opacity-45' : '',
         )}
       >
@@ -180,15 +182,16 @@ export function SplitView({
       <main
         className={cn(
           'min-w-0 flex-1 flex-col',
-          showListOnMobile ? 'hidden md:flex' : 'flex',
+          showListOnMobile ? 'hidden xl:flex' : 'flex',
         )}
       >
-        {/* Mobile-only back bar. The sidebar is hidden on phones once a
-            run is selected (or in create mode), so we surface a
-            persistent path back to the list. md+ never sees this — the
-            sidebar itself is the navigation. */}
+        {/* Back-to-list bar shown below xl. The sidebar is hidden on
+            phones / tablets / narrow laptops once a run is selected (or
+            in create mode), so we surface a persistent path back to the
+            list. xl+ never sees this — the sidebar itself is the
+            navigation there. */}
         {!showListOnMobile && (
-          <div className="md:hidden flex items-center border-b border-border bg-background px-3 py-2">
+          <div className="xl:hidden flex items-center border-b border-border bg-background px-3 py-2">
             <button
               type="button"
               onClick={goToList}