From aa10dd40fd026c556a1c70d2eb085a89f30f44c8 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 20:14:16 +0200
Subject: [PATCH 1/3] layout: tweak content order for small screens

---
 .../pages/session-details/session-details.tsx | 172 +++++++++---------
 1 file changed, 84 insertions(+), 88 deletions(-)

diff --git a/ui/src/pages/session-details/session-details.tsx b/ui/src/pages/session-details/session-details.tsx
index cf7d9bbfa..a8c966f10 100644
--- a/ui/src/pages/session-details/session-details.tsx
+++ b/ui/src/pages/session-details/session-details.tsx
@@ -126,101 +126,97 @@ const Content = ({ session }: { session: SessionDetails }) => {
       >
         {activeCapture ? <Process capture={activeCapture} /> : null}
       </PageHeader>
-      <div className="flex flex-col gap-4 md:gap-6">
-        <div className="flex flex-col gap-4 mt-6 md:flex-row md:gap-6">
-          <Box className="p-2 bg-background rounded-lg md:p-4 md:rounded-xl">
-            <Tabs.Root defaultValue={TABS.SESSION}>
-              <Tabs.List>
-                <Tabs.Trigger
-                  value={TABS.SESSION}
-                  label={translate(STRING.TAB_ITEM_SESSION)}
-                />
-                <Tabs.Trigger
-                  value={TABS.CAPTURE}
-                  label={translate(STRING.TAB_ITEM_CAPTURE)}
-                />
-                <Tabs.Trigger
-                  value={TABS.CHARTS}
-                  label={translate(STRING.TAB_ITEM_CHARTS)}
-                />
-              </Tabs.List>
-              <Tabs.Content value={TABS.SESSION}>
-                <div className="w-72">
-                  <SessionInfo session={session} />
-                </div>
-              </Tabs.Content>
-              <Tabs.Content value={TABS.CAPTURE}>
-                <div className="w-72">
-                  {activeCapture ? (
-                    <CaptureInfo capture={activeCapture} />
-                  ) : null}
-                </div>
-              </Tabs.Content>
-              <Tabs.Content className="overflow-x-auto" value={TABS.CHARTS}>
-                <div className="w-96 space-y-4">
-                  <SessionPlots session={session} />
-                </div>
-              </Tabs.Content>
-            </Tabs.Root>
-          </Box>
-          <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
-            <div className="grow flex items-center justify-center bg-foreground">
-              <Capture
-                defaultFilters={settings.defaultFilters}
-                detections={activeCapture?.detections ?? []}
-                height={activeCapture?.height ?? session.firstCapture.height}
-                showDetections={settings.showDetections}
-                src={activeCapture?.src}
-                width={activeCapture?.width ?? session.firstCapture.width}
+      <div className="grid grid-cols-1 gap-4 mt-6 md:grid-cols-[auto_1fr] md:gap-6">
+        <Box className="order-last p-2 bg-background rounded-lg md:order-first md:p-4 md:rounded-xl">
+          <Tabs.Root defaultValue={TABS.SESSION}>
+            <Tabs.List>
+              <Tabs.Trigger
+                value={TABS.SESSION}
+                label={translate(STRING.TAB_ITEM_SESSION)}
               />
-            </div>
-            <div className="flex flex-wrap justify-between gap-x-8 gap-y-2 p-2 border-t border-border md:p-6">
-              <div className="flex-1 flex items-center gap-2">
-                {activeCapture ? (
-                  <>
-                    <span className="pt-0.5 text-muted-foreground truncate">
-                      {activeCapture.dateTimeLabel}
-                    </span>
-                    <StarButton
-                      capture={activeCapture}
-                      canStar={user.loggedIn && activeCapture.canStar}
-                    />
-                    <BasicTooltip
-                      asChild
-                      content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
-                    >
-                      <a
-                        href={activeCapture.url}
-                        className={cn(
-                          buttonVariants({ size: 'icon', variant: 'ghost' })
-                        )}
-                        rel="noreferrer"
-                        target="_blank"
-                      >
-                        <ExternalLinkIcon className="w-4 h-4" />
-                      </a>
-                    </BasicTooltip>
-                  </>
-                ) : null}
+              <Tabs.Trigger
+                value={TABS.CAPTURE}
+                label={translate(STRING.TAB_ITEM_CAPTURE)}
+              />
+              <Tabs.Trigger
+                value={TABS.CHARTS}
+                label={translate(STRING.TAB_ITEM_CHARTS)}
+              />
+            </Tabs.List>
+            <Tabs.Content value={TABS.SESSION}>
+              <div className="w-72">
+                <SessionInfo session={session} />
               </div>
-              <div className="flex items-center justify-center">
-                <CaptureNavigation
-                  activeCapture={activeCapture}
-                  timeline={timeline}
-                  setActiveCaptureId={setActiveCaptureId}
-                />
+            </Tabs.Content>
+            <Tabs.Content value={TABS.CAPTURE}>
+              <div className="w-72">
+                {activeCapture ? <CaptureInfo capture={activeCapture} /> : null}
               </div>
-              <div className="flex-1 flex items-center justify-end">
-                <ViewSettings
-                  session={session}
-                  onSettingsChange={setSettings}
-                  settings={settings}
-                />
+            </Tabs.Content>
+            <Tabs.Content className="overflow-x-auto" value={TABS.CHARTS}>
+              <div className="w-96 space-y-4">
+                <SessionPlots session={session} />
               </div>
+            </Tabs.Content>
+          </Tabs.Root>
+        </Box>
+        <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
+          <div className="grow flex items-center justify-center bg-foreground">
+            <Capture
+              defaultFilters={settings.defaultFilters}
+              detections={activeCapture?.detections ?? []}
+              height={activeCapture?.height ?? session.firstCapture.height}
+              showDetections={settings.showDetections}
+              src={activeCapture?.src}
+              width={activeCapture?.width ?? session.firstCapture.width}
+            />
+          </div>
+          <div className="flex flex-wrap justify-between gap-x-8 gap-y-2 p-2 border-t border-border md:p-6">
+            <div className="flex-1 flex items-center gap-2">
+              {activeCapture ? (
+                <>
+                  <span className="pt-0.5 text-muted-foreground truncate">
+                    {activeCapture.dateTimeLabel}
+                  </span>
+                  <StarButton
+                    capture={activeCapture}
+                    canStar={user.loggedIn && activeCapture.canStar}
+                  />
+                  <BasicTooltip
+                    asChild
+                    content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
+                  >
+                    <a
+                      href={activeCapture.url}
+                      className={cn(
+                        buttonVariants({ size: 'icon', variant: 'ghost' })
+                      )}
+                      rel="noreferrer"
+                      target="_blank"
+                    >
+                      <ExternalLinkIcon className="w-4 h-4" />
+                    </a>
+                  </BasicTooltip>
+                </>
+              ) : null}
+            </div>
+            <div className="flex items-center justify-center">
+              <CaptureNavigation
+                activeCapture={activeCapture}
+                timeline={timeline}
+                setActiveCaptureId={setActiveCaptureId}
+              />
+            </div>
+            <div className="flex-1 flex items-center justify-end">
+              <ViewSettings
+                session={session}
+                onSettingsChange={setSettings}
+                settings={settings}
+              />
             </div>
           </div>
         </div>
-        <div className="bg-background rounded-lg border border-border p-2 md:p-4">
+        <div className="p-2 bg-background rounded-lg border border-border overflow-hidden md:col-span-2 md:p-4">
           <ActivityPlot
             session={session}
             setActiveCaptureId={setActiveCaptureId}

From 6feef84545dc5298dd7511a6235c938056caaaca Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 20:32:07 +0200
Subject: [PATCH 2/3] feat: exclude snap to detections view setting after
 navigation improvements

---
 .../activity-plot/activity-plot.tsx             | 17 +++++++----------
 .../pages/session-details/session-details.tsx   |  3 ---
 ui/src/pages/session-details/view-settings.tsx  | 17 -----------------
 3 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/ui/src/pages/session-details/activity-plot/activity-plot.tsx b/ui/src/pages/session-details/activity-plot/activity-plot.tsx
index 9c61728dd..711c11a1b 100644
--- a/ui/src/pages/session-details/activity-plot/activity-plot.tsx
+++ b/ui/src/pages/session-details/activity-plot/activity-plot.tsx
@@ -19,13 +19,11 @@ const tooltipBorderColor = CONSTANTS.COLOR_THEME.border
 export interface ActivityPlotProps {
   session: SessionDetails
   setActiveCaptureId: (captureId: string) => void
-  snapToDetections?: boolean
   timeline: TimelineTick[]
 }
 
 export const ActivityPlot = ({
   session,
-  snapToDetections,
   timeline,
   setActiveCaptureId,
 }: ActivityPlotProps) => {
@@ -156,14 +154,13 @@ export const ActivityPlot = ({
               return
             }
 
-            const captureId =
-              snapToDetections || !timelineTick.representativeCaptureId
-                ? findClosestCaptureId({
-                    snapToDetections,
-                    timeline,
-                    targetDate: timelineTick.startDate,
-                  })
-                : timelineTick.representativeCaptureId
+            const captureId = !timelineTick.representativeCaptureId
+              ? findClosestCaptureId({
+                  snapToDetections: false,
+                  timeline,
+                  targetDate: timelineTick.startDate,
+                })
+              : timelineTick.representativeCaptureId
 
             if (captureId) {
               setActiveCaptureId(captureId)
diff --git a/ui/src/pages/session-details/session-details.tsx b/ui/src/pages/session-details/session-details.tsx
index a8c966f10..8de4c3df5 100644
--- a/ui/src/pages/session-details/session-details.tsx
+++ b/ui/src/pages/session-details/session-details.tsx
@@ -86,7 +86,6 @@ const Content = ({ session }: { session: SessionDetails }) => {
   const [settings, setSettings] = useState({
     defaultFilters: true,
     showDetections: true,
-    snapToDetections: session.numDetections ? true : false,
   })
 
   // Data
@@ -209,7 +208,6 @@ const Content = ({ session }: { session: SessionDetails }) => {
             </div>
             <div className="flex-1 flex items-center justify-end">
               <ViewSettings
-                session={session}
                 onSettingsChange={setSettings}
                 settings={settings}
               />
@@ -220,7 +218,6 @@ const Content = ({ session }: { session: SessionDetails }) => {
           <ActivityPlot
             session={session}
             setActiveCaptureId={setActiveCaptureId}
-            snapToDetections={settings.snapToDetections}
             timeline={timeline}
           />
           <TimelineSlider
diff --git a/ui/src/pages/session-details/view-settings.tsx b/ui/src/pages/session-details/view-settings.tsx
index 7c93d889c..909c3dded 100644
--- a/ui/src/pages/session-details/view-settings.tsx
+++ b/ui/src/pages/session-details/view-settings.tsx
@@ -1,6 +1,5 @@
 import { DefaultFiltersTooltip } from 'components/filtering/default-filter-control'
 import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
-import { SessionDetails } from 'data-services/models/session-details'
 import { SettingsIcon } from 'lucide-react'
 import { BasicTooltip, Button, Checkbox, Popover } from 'nova-ui-kit'
 import { useParams } from 'react-router-dom'
@@ -8,19 +7,15 @@ import { STRING, translate } from 'utils/language'
 
 export const ViewSettings = ({
   onSettingsChange,
-  session,
   settings,
 }: {
   onSettingsChange: (settings: {
     defaultFilters: boolean
     showDetections: boolean
-    snapToDetections: boolean
   }) => void
-  session: SessionDetails
   settings: {
     defaultFilters: boolean
     showDetections: boolean
-    snapToDetections: boolean
   }
 }) => {
   const { projectId } = useParams()
@@ -70,18 +65,6 @@ export const ViewSettings = ({
             />
             {project ? <DefaultFiltersTooltip project={project} /> : null}
           </div>
-          <Checkbox
-            id="snap-to-detections"
-            label={translate(STRING.SNAP_TO_DETECTIONS)}
-            checked={settings.snapToDetections}
-            onCheckedChange={() =>
-              onSettingsChange({
-                ...settings,
-                snapToDetections: !settings.snapToDetections,
-              })
-            }
-            disabled={session.numDetections ? false : true}
-          />
         </div>
       </Popover.Content>
     </Popover.Root>

From e885c9b2e86018bd39b795df3df186f3bdd475ce Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 21:40:54 +0200
Subject: [PATCH 3/3] layout: stabilize layout for small screens

---
 ui/src/pages/session-details/process/process.tsx | 11 ++++++++++-
 ui/src/pages/session-details/session-details.tsx | 16 ++++++++++------
 ui/src/pages/session-details/view-settings.tsx   |  2 +-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/ui/src/pages/session-details/process/process.tsx b/ui/src/pages/session-details/process/process.tsx
index f32779685..7d9c412ca 100644
--- a/ui/src/pages/session-details/process/process.tsx
+++ b/ui/src/pages/session-details/process/process.tsx
@@ -18,13 +18,22 @@ import { STRING, translate } from 'utils/language'
 import { UserPermission } from 'utils/user/types'
 import { ProcessNow } from './process-now'
 
-export const Process = ({ capture }: { capture: CaptureDetails }) => {
+export const Process = ({ capture }: { capture?: CaptureDetails }) => {
   const { projectId } = useParams()
   const { project } = useProjectDetails(projectId as string, true)
   const [pipelineId, setPipelineId] = useState(
     project?.settings.defaultProcessingPipeline?.id
   )
 
+  if (!capture) {
+    return (
+      <Button disabled size="small" variant="outline">
+        <span>{translate(STRING.PROCESS)}</span>
+        <ChevronDownIcon className="w-4 h-4" />
+      </Button>
+    )
+  }
+
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
diff --git a/ui/src/pages/session-details/session-details.tsx b/ui/src/pages/session-details/session-details.tsx
index 8de4c3df5..3b6eabf78 100644
--- a/ui/src/pages/session-details/session-details.tsx
+++ b/ui/src/pages/session-details/session-details.tsx
@@ -123,7 +123,7 @@ const Content = ({ session }: { session: SessionDetails }) => {
         })}
         tooltip={translate(STRING.TOOLTIP_SESSION)}
       >
-        {activeCapture ? <Process capture={activeCapture} /> : null}
+        {user.loggedIn ? <Process capture={activeCapture} /> : null}
       </PageHeader>
       <div className="grid grid-cols-1 gap-4 mt-6 md:grid-cols-[auto_1fr] md:gap-6">
         <Box className="order-last p-2 bg-background rounded-lg md:order-first md:p-4 md:rounded-xl">
@@ -170,8 +170,8 @@ const Content = ({ session }: { session: SessionDetails }) => {
               width={activeCapture?.width ?? session.firstCapture.width}
             />
           </div>
-          <div className="flex flex-wrap justify-between gap-x-8 gap-y-2 p-2 border-t border-border md:p-6">
-            <div className="flex-1 flex items-center gap-2">
+          <div className="flex flex-col flex-wrap justify-between gap-2 p-2 border-t border-border md:flex-row md:p-6">
+            <div className="min-h-8 flex-1 flex items-center gap-2">
               {activeCapture ? (
                 <>
                   <span className="pt-0.5 text-muted-foreground truncate">
@@ -197,16 +197,20 @@ const Content = ({ session }: { session: SessionDetails }) => {
                     </a>
                   </BasicTooltip>
                 </>
-              ) : null}
+              ) : (
+                <span className="pt-0.5 text-muted-foreground truncate">
+                  {translate(STRING.LOADING_DATA)}...
+                </span>
+              )}
             </div>
-            <div className="flex items-center justify-center">
+            <div className="flex items-center md:justify-center">
               <CaptureNavigation
                 activeCapture={activeCapture}
                 timeline={timeline}
                 setActiveCaptureId={setActiveCaptureId}
               />
             </div>
-            <div className="flex-1 flex items-center justify-end">
+            <div className="flex-1 flex items-center md:justify-end">
               <ViewSettings
                 onSettingsChange={setSettings}
                 settings={settings}
diff --git a/ui/src/pages/session-details/view-settings.tsx b/ui/src/pages/session-details/view-settings.tsx
index 909c3dded..acdf0e2ca 100644
--- a/ui/src/pages/session-details/view-settings.tsx
+++ b/ui/src/pages/session-details/view-settings.tsx
@@ -28,7 +28,7 @@ export const ViewSettings = ({
           <Button
             aria-label={translate(STRING.VIEW_SETTINGS)}
             size="icon"
-            variant="ghost"
+            variant="outline"
           >
             <SettingsIcon className="w-4 h-4" />
           </Button>