diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index dacb5d09..e6fa6374 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { cn } from '@/lib/utils'
+import { useIsMobile } from '@/hooks/use-mobile'
 import { Outlet, Link, useLocation, useNavigate } from 'react-router'
 import {
   CanAccess,
@@ -443,7 +444,7 @@ function AppSidebar() {
       </SidebarContent>
 
       <SidebarFooter>
-        {/* Footer links — hidden when collapsed */}
+        {/* Footer links + version — hidden when collapsed */}
         {!collapsed && (
           <div className="border-t px-3 pt-3 pb-1 flex flex-col gap-0.5">
             {FOOTER_LINKS.map(({ label, href }) => (
@@ -455,18 +456,13 @@ function AppSidebar() {
                 {label}
               </Link>
             ))}
-          </div>
-        )}
-
-        <SupportPanelTrigger collapsed={collapsed} />
-
-        {!collapsed && (
-          <div className="px-3 pb-2">
-            <span className="text-xs text-muted-foreground/60">
+            <span className="text-xs text-muted-foreground/60 pt-1">
               v{pkg.version}
             </span>
           </div>
         )}
+
+        <SupportPanelTrigger collapsed={collapsed} />
       </SidebarFooter>
     </Sidebar>
   )
@@ -594,6 +590,7 @@ function getBrowser(): string {
 
 function SupportPanel() {
   const { isOpen, close } = useContext(SupportPanelContext)
+  const isMobile = useIsMobile()
   const { data: user } = useGetIdentity<{ name: string; email: string }>()
   const location = useLocation()
 
@@ -722,23 +719,12 @@ function SupportPanel() {
 
   const pageUrl = location.pathname
 
-  return (
+  const panelBody = (
     <div
-      ref={outerRef}
-      className={cn(
-        'relative shrink-0 sticky top-0 h-svh overflow-hidden border-l bg-background transition-[width] duration-200 ease-in-out',
-        !isOpen && 'w-0 border-l-0'
-      )}
-      style={isOpen ? { width } : undefined}
-      aria-hidden={!isOpen}
+      ref={innerRef}
+      className="flex h-full w-full flex-col"
+      style={isMobile ? undefined : { width }}
     >
-      {/* Drag handle */}
-      <div
-        onMouseDown={onMouseDown}
-        className="absolute left-0 top-0 h-full w-1.5 cursor-col-resize hover:bg-primary/20 transition-colors z-10"
-      />
-
-      <div ref={innerRef} className="flex h-full flex-col" style={{ width }}>
         {/* Panel header */}
         <div className="flex h-14 shrink-0 items-center justify-between border-b px-4">
           <div className="flex items-center gap-2">
@@ -1017,6 +1003,36 @@ function SupportPanel() {
           )}
         </div>
       </div>
+  )
+
+  if (isMobile) {
+    if (!isOpen) return null
+
+    return (
+      <div
+        className="fixed inset-x-0 top-14 z-40 h-[calc(100svh-3.5rem)] border-l bg-background"
+        aria-hidden={!isOpen}
+      >
+        {panelBody}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={outerRef}
+      className={cn(
+        'relative shrink-0 sticky top-0 h-svh overflow-hidden border-l bg-background transition-[width] duration-200 ease-in-out',
+        !isOpen && 'w-0 border-l-0'
+      )}
+      style={isOpen ? { width } : undefined}
+      aria-hidden={!isOpen}
+    >
+      <div
+        onMouseDown={onMouseDown}
+        className="absolute left-0 top-0 h-full w-1.5 cursor-col-resize hover:bg-primary/20 transition-colors z-10"
+      />
+      {panelBody}
     </div>
   )
 }
@@ -1146,14 +1162,14 @@ function ShellHeader() {
       <div className="min-w-0 shrink overflow-hidden">
         <HeaderBreadcrumb />
       </div>
-      {/* Search bar — hidden on mobile, visible sm+ */}
-      <div className="hidden sm:block shrink-0 max-w-sm w-full sm:ml-3">
+      {/* Search bar — hidden on mobile, visible tablet+ */}
+      <div className="hidden tablet:block shrink-0 max-w-sm w-full tablet:ml-3">
         <SearchBar />
       </div>
       <div className="ml-auto flex items-center gap-1 shrink-0">
         {/* Mobile search icon */}
         <button
-          className="sm:hidden flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+          className="tablet:hidden flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
           onClick={openSearch}
           aria-label="Search"
         >
@@ -1162,12 +1178,11 @@ function ShellHeader() {
         <ReportBugButton />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 px-2 sm:px-2.5 gap-1.5 font-semibold cursor-pointer">
-              {/* Avatar on mobile, full name on sm+ */}
-              <span className="flex sm:hidden size-7 rounded bg-primary items-center justify-center text-primary-foreground text-xs font-bold shrink-0">
+            <Button variant="ghost" className="h-9 px-2 mobile-lg:px-2.5 gap-1.5 font-semibold cursor-pointer">
+              <span className="flex mobile-lg:hidden size-7 rounded bg-primary items-center justify-center text-primary-foreground text-xs font-bold shrink-0">
                 {initials}
               </span>
-              <span className="hidden sm:inline">{user?.name || 'User'}</span>
+              <span className="hidden mobile-lg:inline">{user?.name || 'User'}</span>
               <ChevronDown className="size-3.5 text-muted-foreground" />
             </Button>
           </DropdownMenuTrigger>
@@ -1246,7 +1261,6 @@ function SidebarAutoCollapse() {
 function AppShellInner({ children }: { children?: React.ReactNode }) {
   const { open: sidebarOpen, setOpen: setSidebarOpen } = useSidebar()
   const [panelOpen, setPanelOpen] = useState(false)
-  // Remember whether the sidebar was open when the panel was triggered
   const sidebarWasOpen = useRef(false)
 
   const openPanel = () => {
@@ -1261,7 +1275,9 @@ function AppShellInner({ children }: { children?: React.ReactNode }) {
   }
 
   return (
-    <SupportPanelContext.Provider value={{ isOpen: panelOpen, open: openPanel, close: closePanel }}>
+    <SupportPanelContext.Provider
+      value={{ isOpen: panelOpen, open: openPanel, close: closePanel }}
+    >
       <SidebarAutoCollapse />
       <AppSidebar />
       <AppContent className="min-w-0">
diff --git a/src/components/OcotilloPageHeader.tsx b/src/components/OcotilloPageHeader.tsx
index db796c39..872e24bc 100644
--- a/src/components/OcotilloPageHeader.tsx
+++ b/src/components/OcotilloPageHeader.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { Box, Skeleton, SxProps, Theme, Typography } from '@mui/material'
+import { cn } from '@/lib/utils'
 
 /** Shared CardHeader layout for Ocotillo list and show pages. */
 export const ocotilloCardHeaderProps: { sx: SxProps<Theme> } = {
@@ -9,11 +10,13 @@ export const ocotilloCardHeaderProps: { sx: SxProps<Theme> } = {
     gap: { xs: 1.5, md: 3 },
     '.MuiCardHeader-content': {
       alignSelf: 'flex-start',
+      minWidth: 0,
     },
     '.MuiCardHeader-action': {
       alignSelf: { xs: 'flex-end', md: 'flex-start' },
       mr: 0,
       pt: { xs: 0.5, md: 1 },
+      maxWidth: '100%',
     },
   },
 }
@@ -69,6 +72,14 @@ export function OcotilloHeaderButtons({
   className?: string
 }) {
   return (
-    <div className={className ?? 'flex items-center gap-1.5'}>{children}</div>
+    <div
+      className={cn(
+        'flex max-w-full flex-wrap items-center justify-end gap-1.5',
+        '[&_button]:shrink-0',
+        className
+      )}
+    >
+      {children}
+    </div>
   )
 }
diff --git a/src/components/card/CoreWellInfo.tsx b/src/components/card/CoreWellInfo.tsx
index a7f8a441..cd139dab 100644
--- a/src/components/card/CoreWellInfo.tsx
+++ b/src/components/card/CoreWellInfo.tsx
@@ -1,6 +1,27 @@
 import { Box, Paper, Skeleton, Typography } from '@mui/material'
+import { CORE_WELL_INFO_STATS_MIN_PX } from '@/constants/breakpoints'
 import { IWell } from '@/interfaces/ocotillo'
 
+const statCellSx = (index: number) => ({
+  px: 2,
+  py: 1.5,
+  borderColor: 'divider',
+  borderTop: index > 0 ? '1px solid' : 'none',
+  borderLeft: 'none',
+  [`@container (min-width: ${CORE_WELL_INFO_STATS_MIN_PX}px)`]: {
+    borderTop: 'none',
+    borderLeft: index > 0 ? '1px solid' : 'none',
+  },
+})
+
+const statsGridSx = {
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  [`@container (min-width: ${CORE_WELL_INFO_STATS_MIN_PX}px)`]: {
+    gridTemplateColumns: 'repeat(3, 1fr)',
+  },
+} as const
+
 export const CoreWellInfoCard = ({ well }: { well?: IWell }) => {
   if (!well) {
     return <LoadingBar />
@@ -34,18 +55,13 @@ export const CoreWellInfoCard = ({ well }: { well?: IWell }) => {
   ]
 
   return (
-    <Paper elevation={2} sx={{ borderRadius: 2, overflow: 'hidden' }}>
-      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+    <Paper
+      elevation={2}
+      sx={{ borderRadius: 2, overflow: 'hidden', containerType: 'inline-size' }}
+    >
+      <Box sx={statsGridSx}>
         {stats.map((stat, i) => (
-          <Box
-            key={stat.label}
-            sx={{
-              px: 2,
-              py: 1.5,
-              borderLeft: i > 0 ? '1px solid' : 'none',
-              borderColor: 'divider',
-            }}
-          >
+          <Box key={stat.label} sx={statCellSx(i)}>
             <Typography
               variant="caption"
               color="text.secondary"
@@ -68,18 +84,13 @@ export const CoreWellInfoCard = ({ well }: { well?: IWell }) => {
 }
 
 const LoadingBar = () => (
-  <Paper elevation={2} sx={{ borderRadius: 2, overflow: 'hidden' }}>
-    <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+  <Paper
+    elevation={2}
+    sx={{ borderRadius: 2, overflow: 'hidden', containerType: 'inline-size' }}
+  >
+    <Box sx={statsGridSx}>
       {Array.from({ length: 3 }).map((_, i) => (
-        <Box
-          key={i}
-          sx={{
-            px: 2,
-            py: 1.5,
-            borderLeft: i > 0 ? '1px solid' : 'none',
-            borderColor: 'divider',
-          }}
-        >
+        <Box key={i} sx={statCellSx(i)}>
           <Skeleton width="60%" height={14} sx={{ mb: 0.5 }} />
           <Skeleton width="80%" height={18} />
         </Box>
diff --git a/src/components/editing/EditPanelLayout.tsx b/src/components/editing/EditPanelLayout.tsx
index 4cb8acad..4f891d73 100644
--- a/src/components/editing/EditPanelLayout.tsx
+++ b/src/components/editing/EditPanelLayout.tsx
@@ -57,50 +57,51 @@ export function EditPanelLayout({
     useEditPanelWidth(resizeEnabled)
 
   if (pinPanel === 'sticky') {
+    const showPanelShell = open || !isMobile
+
     return (
       <div className={cn('flex', className)}>
         <div className={cn('min-w-0 flex-1', isMobile && open && 'hidden')}>
           {children}
         </div>
 
-        {isMobile ? (
-          open ? (
-            <div
-              className={cn(
-                'fixed inset-x-0 top-14 z-30 w-full bg-background',
-                PANEL_VIEWPORT_HEIGHT
-              )}
-            >
-              {panel}
-            </div>
-          ) : null
-        ) : (
+        {showPanelShell ? (
           <div
             className={cn(
-              'relative shrink-0',
-              !isResizing && 'transition-[width] duration-200 ease-in-out',
-              !open && 'w-0 overflow-hidden'
+              isMobile
+                ? cn(
+                    'fixed inset-x-0 top-14 z-30 w-full bg-background',
+                    PANEL_VIEWPORT_HEIGHT
+                  )
+                : cn(
+                    'relative shrink-0',
+                    !isResizing &&
+                      'transition-[width] duration-200 ease-in-out',
+                    !open && 'w-0 overflow-hidden'
+                  )
             )}
-            style={open ? { width: panelWidth } : undefined}
+            style={!isMobile && open ? { width: panelWidth } : undefined}
+            aria-hidden={!open}
           >
+            {!isMobile && open && resizeEnabled ? (
+              <EditPanelResizeHandle
+                panelWidth={panelWidth}
+                onResizeStart={handleResizeStart}
+              />
+            ) : null}
             {open ? (
               <div
                 className={cn(
-                  'relative sticky top-0 w-full',
+                  'relative w-full',
+                  !isMobile && 'sticky top-0',
                   PANEL_VIEWPORT_HEIGHT
                 )}
               >
-                {resizeEnabled ? (
-                  <EditPanelResizeHandle
-                    panelWidth={panelWidth}
-                    onResizeStart={handleResizeStart}
-                  />
-                ) : null}
                 {panel}
               </div>
             ) : null}
           </div>
-        )}
+        ) : null}
       </div>
     )
   }
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 64c84189..9048df98 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -187,7 +187,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer hidden text-sidebar-foreground md:block"
+      className="group peer hidden text-sidebar-foreground tablet:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -210,7 +210,7 @@ function Sidebar({
         data-slot="sidebar-container"
         data-side={side}
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-100 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-100 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] tablet:flex",
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
@@ -287,7 +287,7 @@ function AppContent({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="app-content"
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex w-full flex-1 flex-col bg-background tablet:peer-data-[variant=inset]:m-2 tablet:peer-data-[variant=inset]:ml-0 tablet:peer-data-[variant=inset]:rounded-xl tablet:peer-data-[variant=inset]:shadow-sm tablet:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
       {...props}
diff --git a/src/constants/breakpoints.ts b/src/constants/breakpoints.ts
new file mode 100644
index 00000000..60490e02
--- /dev/null
+++ b/src/constants/breakpoints.ts
@@ -0,0 +1,48 @@
+/**
+ * Canonical Ocotillo responsive breakpoints.
+ * Keep in sync with @theme breakpoints in index.css and MUI theme.breakpoints.values.
+ */
+export const SCREENS = {
+  card: '160px',
+  'card-lg': '240px',
+  mobile: '320px',
+  'mobile-lg': '480px',
+  tablet: '640px',
+  'tablet-lg': '880px',
+  desktop: '1024px',
+  'desktop-lg': '1256px',
+  widescreen: '1400px',
+} as const
+
+export type ScreenName = keyof typeof SCREENS
+
+/** Numeric px values for JS (matchMedia, ResizeObserver). */
+export const SCREEN_PX: Record<ScreenName, number> = {
+  card: 160,
+  'card-lg': 240,
+  mobile: 320,
+  'mobile-lg': 480,
+  tablet: 640,
+  'tablet-lg': 880,
+  desktop: 1024,
+  'desktop-lg': 1256,
+  widescreen: 1400,
+}
+
+/** Viewport below this width uses mobile shell behavior (sidebar sheet, full-screen panels). */
+export const MOBILE_VIEWPORT_MAX_PX = SCREEN_PX.tablet
+
+/** Well detail main body switches to two columns at this content width. */
+export const WELL_SHOW_TWO_COLUMN_MIN_PX = SCREEN_PX['tablet-lg']
+
+/** CoreWellInfo stats bar switches from stacked to three columns. */
+export const CORE_WELL_INFO_STATS_MIN_PX = SCREEN_PX['mobile-lg']
+
+/** MUI breakpoint.values aligned to SCREENS. */
+export const MUI_BREAKPOINT_VALUES = {
+  xs: 0,
+  sm: SCREEN_PX['mobile-lg'],
+  md: SCREEN_PX['tablet-lg'],
+  lg: SCREEN_PX.desktop,
+  xl: SCREEN_PX['desktop-lg'],
+} as const
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index a3abc778..b39fcf72 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -21,3 +21,4 @@ export * from './useViewportBbox'
 export * from './useSearchModalState'
 export * from './useSidebarPanelSync'
 export * from './useWellDetails'
+export * from './useContainerMinWidth'
diff --git a/src/hooks/use-mobile.ts b/src/hooks/use-mobile.ts
index 4296a56b..be73b472 100644
--- a/src/hooks/use-mobile.ts
+++ b/src/hooks/use-mobile.ts
@@ -1,13 +1,12 @@
 import * as React from 'react'
-
-const MOBILE_BREAKPOINT = 768
+import { MOBILE_VIEWPORT_MAX_PX } from '@/constants/breakpoints'
 
 function readIsMobileViewport() {
   if (typeof window === 'undefined') {
     return false
   }
 
-  return window.innerWidth < MOBILE_BREAKPOINT
+  return window.innerWidth < MOBILE_VIEWPORT_MAX_PX
 }
 
 export function useIsMobile() {
@@ -25,7 +24,9 @@ export function useIsMobile() {
       return () => window.removeEventListener('resize', update)
     }
 
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(
+      `(max-width: ${MOBILE_VIEWPORT_MAX_PX - 1}px)`
+    )
     mql.addEventListener('change', update)
     return () => mql.removeEventListener('change', update)
   }, [])
diff --git a/src/hooks/useContainerMinWidth.ts b/src/hooks/useContainerMinWidth.ts
new file mode 100644
index 00000000..771e5b97
--- /dev/null
+++ b/src/hooks/useContainerMinWidth.ts
@@ -0,0 +1,34 @@
+import * as React from 'react'
+
+/**
+ * Returns true when the observed element's content width is at least minWidth.
+ * Uses ResizeObserver so layout responds to available space (e.g. when side panels open).
+ */
+export function useContainerMinWidth(
+  ref: React.RefObject<Element | null>,
+  minWidth: number
+) {
+  const [matches, setMatches] = React.useState(false)
+
+  React.useEffect(() => {
+    const element = ref.current
+    if (!element) return
+
+    const update = (width: number) => {
+      setMatches(width >= minWidth)
+    }
+
+    update(element.getBoundingClientRect().width)
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      update(entry.contentRect.width)
+    })
+
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [minWidth, ref])
+
+  return matches
+}
diff --git a/src/hooks/useWellDetails.ts b/src/hooks/useWellDetails.ts
index b429f721..7decd400 100644
--- a/src/hooks/useWellDetails.ts
+++ b/src/hooks/useWellDetails.ts
@@ -53,18 +53,7 @@ export function useWellDetails(id: WellDetailsId) {
         method: 'get',
       })
 
-      const data = response.data as IWellDetails
-      const label = `[ocotillo] GET thing/water-well/${id}/details`
-      try {
-        const plain = JSON.parse(JSON.stringify(data)) as IWellDetails
-        console.log(label, plain)
-      } catch {
-        console.log(label, data)
-      }
-      console.log(
-        `${label} (full JSON, scroll or copy this if the object above will not expand)\n${JSON.stringify(data, null, 2)}`
-      )
-      return data
+      return response.data as IWellDetails
     },
   })
 
diff --git a/src/index.css b/src/index.css
index ff944105..04d5184a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -233,4 +233,15 @@
   --color-primary-dark: var(--primary-dark);
   --color-secondary-light: var(--secondary-light);
   --color-secondary-dark: var(--secondary-dark);
+
+  /* Canonical responsive breakpoints (see src/constants/breakpoints.ts) */
+  --breakpoint-card: 160px;
+  --breakpoint-card-lg: 240px;
+  --breakpoint-mobile: 320px;
+  --breakpoint-mobile-lg: 480px;
+  --breakpoint-tablet: 640px;
+  --breakpoint-tablet-lg: 880px;
+  --breakpoint-desktop: 1024px;
+  --breakpoint-desktop-lg: 1256px;
+  --breakpoint-widescreen: 1400px;
 }
diff --git a/src/pages/ocotillo/thing/well-show.tsx b/src/pages/ocotillo/thing/well-show.tsx
index 044ed10a..5df63f85 100644
--- a/src/pages/ocotillo/thing/well-show.tsx
+++ b/src/pages/ocotillo/thing/well-show.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { useDataProvider, useList, useResourceParams } from '@refinedev/core'
 import { captureEvent } from '@/analytics/posthog'
 import { useQuery } from '@tanstack/react-query'
@@ -20,15 +20,16 @@ import {
   ISensor,
   IWellScreen,
 } from '@/interfaces/ocotillo'
-import { Stack } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import { IHydrographDatasource } from '@/interfaces/st2'
 import {
   useAccessCapabilities,
+  useContainerMinWidth,
   useSensorDeploymentRows,
   useSidebarPanelSync,
   useWellDetails,
 } from '@/hooks'
-import Grid from '@mui/material/Grid2'
+import { WELL_SHOW_TWO_COLUMN_MIN_PX } from '@/constants/breakpoints'
 import {
   CoreWellInfoCard,
   InteractiveSatelliteMapCard,
@@ -332,6 +333,120 @@ export const WellShow = () => {
     return source
   }, [manualHydrographRows, transducerHydrographRows])
 
+  const layoutRef = useRef<HTMLDivElement>(null)
+  const isWideLayout = useContainerMinWidth(
+    layoutRef,
+    WELL_SHOW_TWO_COLUMN_MIN_PX
+  )
+
+  const wellShowCards = useMemo(() => {
+    const mainCards = [
+      <CoreWellInfoCard key="core" well={well} />,
+      <InteractiveSatelliteMapCard key="map" well={well} />,
+      <HydrographCard
+        key="hydrograph"
+        well={well}
+        rows={[...manualHydrographRows, ...transducerHydrographRows]}
+        dataSource={hydrographDatasource}
+        isLoading={hydrographQuery.isPending}
+      />,
+      <RecentWaterLevelObservationsCard
+        key="observations"
+        well={well}
+        rows={recentObservations}
+        isLoading={isDetailsLoading}
+      />,
+      <NotesAccordion key="notes" well={well} />,
+      <EquipmentCard
+        key="equipment"
+        sensors={sensors}
+        deployments={deployments}
+        isDetailsPending={Boolean(id) && detailsQuery.isPending}
+      />,
+      <WellScreensCard
+        key="screens"
+        rows={wellScreens}
+        isLoading={isDetailsLoading}
+      />,
+      <AlternateIdsCard key="ids" dataGridProps={idLinkDataGridProps} />,
+      <AttachmentsCard
+        key="attachments"
+        assets={assets}
+        isLoading={assetQuery.isLoading}
+        refetchAssets={assetQuery.refetch}
+        thingId={well?.id ?? (id ? Number(id) : null)}
+      />,
+      <OSEPODInfoCard key="osepod" pod_id={osepod_id} />,
+      <USGSInfoCard key="usgs" site_id={usgs_id} />,
+    ]
+
+    const sideCards = [
+      <ContactsCard
+        key="contacts"
+        contacts={contacts}
+        isLoading={isDetailsLoading}
+        siteName={well ? displayWellSiteName(well) : undefined}
+      />,
+      <MonitoringInfoCard
+        key="monitoring"
+        well={well}
+        firstVisitParticipants={firstVisitParticipants}
+        lastVisitDate={fieldEvents[0]?.event_date}
+        isLoading={isDetailsLoading}
+      />,
+      <OwnerPermissionsCard
+        key="owner"
+        well={well}
+        isLoading={isDetailsLoading}
+      />,
+      <ConstructionInfoCard key="construction" well={well} />,
+      <GeologyInformationCard key="geology" well={well} />,
+    ]
+
+    const mobileCards = [
+      mainCards[0],
+      sideCards[0],
+      sideCards[1],
+      mainCards[1],
+      mainCards[2],
+      mainCards[3],
+      sideCards[2],
+      mainCards[4],
+      mainCards[5],
+      mainCards[6],
+      mainCards[7],
+      mainCards[8],
+      mainCards[9],
+      mainCards[10],
+      sideCards[3],
+      sideCards[4],
+    ]
+
+    return { mainCards, sideCards, mobileCards }
+  }, [
+    assetQuery.isLoading,
+    assetQuery.refetch,
+    assets,
+    contacts,
+    deployments,
+    detailsQuery.isPending,
+    fieldEvents,
+    firstVisitParticipants,
+    hydrographDatasource,
+    hydrographQuery.isPending,
+    id,
+    idLinkDataGridProps,
+    isDetailsLoading,
+    manualHydrographRows,
+    osepod_id,
+    recentObservations,
+    sensors,
+    transducerHydrographRows,
+    usgs_id,
+    well,
+    wellScreens,
+  ])
+
   return (
     <EditPanelLayout
       open={isEditPanelOpen && Boolean(id)}
@@ -386,76 +501,42 @@ export const WellShow = () => {
                 onClick={toggleEditPanel}
               >
                 <PencilIcon />
-                Edit
+                <span className="hidden mobile-lg:inline">Edit</span>
               </Button>
             ) : null}
           </OcotilloHeaderButtons>
         )}
       >
-        <Stack spacing={2}>
-          <Grid container spacing={2}>
-            {/* Left column: 8 cols */}
-            <Grid size={{ xs: 12, md: 8, lg: 9 }}>
-              <Stack spacing={2}>
-                <CoreWellInfoCard well={well} />
-                <InteractiveSatelliteMapCard well={well} />
-                <HydrographCard
-                  well={well}
-                  rows={[...manualHydrographRows, ...transducerHydrographRows]}
-                  dataSource={hydrographDatasource}
-                  isLoading={hydrographQuery.isPending}
-                />
-                <RecentWaterLevelObservationsCard
-                  well={well}
-                  rows={recentObservations}
-                  isLoading={isDetailsLoading}
-                />
-                <NotesAccordion well={well} />
-                <EquipmentCard
-                  sensors={sensors}
-                  deployments={deployments}
-                  isDetailsPending={Boolean(id) && detailsQuery.isPending}
-                />
-                <WellScreensCard
-                  rows={wellScreens}
-                  isLoading={isDetailsLoading}
-                />
-                <AlternateIdsCard dataGridProps={idLinkDataGridProps} />
-                <AttachmentsCard
-                  assets={assets}
-                  isLoading={assetQuery.isLoading}
-                  refetchAssets={assetQuery.refetch}
-                  thingId={well?.id ?? (id ? Number(id) : null)}
-                />
-                <OSEPODInfoCard pod_id={osepod_id} />
-                <USGSInfoCard site_id={usgs_id} />
+        <Box
+          ref={layoutRef}
+          sx={{
+            width: '100%',
+            minWidth: 0,
+            containerType: 'inline-size',
+          }}
+        >
+          {isWideLayout ? (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: 2,
+              }}
+            >
+              <Stack spacing={2} sx={{ flex: '2 1 0', minWidth: 0 }}>
+                {wellShowCards.mainCards}
               </Stack>
-            </Grid>
-
-            {/* Right column: 2 cols */}
-            <Grid size={{ xs: 12, md: 4, lg: 3 }}>
-              <Stack spacing={2}>
-                <ContactsCard
-                  contacts={contacts}
-                  isLoading={isDetailsLoading}
-                  siteName={well ? displayWellSiteName(well) : undefined}
-                />
-                <MonitoringInfoCard
-                  well={well}
-                  firstVisitParticipants={firstVisitParticipants}
-                  lastVisitDate={fieldEvents[0]?.event_date}
-                  isLoading={isDetailsLoading}
-                />
-                <OwnerPermissionsCard
-                  well={well}
-                  isLoading={isDetailsLoading}
-                />
-                <ConstructionInfoCard well={well} />
-                <GeologyInformationCard well={well} />
+              <Stack
+                spacing={2}
+                sx={{ flex: '1 1 280px', minWidth: 0, maxWidth: 360 }}
+              >
+                {wellShowCards.sideCards}
               </Stack>
-            </Grid>
-          </Grid>
-        </Stack>
+            </Box>
+          ) : (
+            <Stack spacing={2}>{wellShowCards.mobileCards}</Stack>
+          )}
+        </Box>
       </Show>
     </EditPanelLayout>
   )
diff --git a/src/test/pages/well-show.test.tsx b/src/test/pages/well-show.test.tsx
index 20f3cd0d..2ddb77fc 100644
--- a/src/test/pages/well-show.test.tsx
+++ b/src/test/pages/well-show.test.tsx
@@ -45,6 +45,7 @@ vi.mock('@/hooks', () => ({
     closePanel: vi.fn(),
     togglePanel: vi.fn(),
   }),
+  useContainerMinWidth: () => false,
   useWellDetails: (id: unknown) => {
     mockedUseWellDetails(id)
     return {
diff --git a/src/theme.ts b/src/theme.ts
index 2b8944ae..3a8a7295 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,6 +1,7 @@
 import { PaletteMode } from '@mui/material'
 import { createTheme } from '@mui/material/styles'
 import type {} from '@mui/x-data-grid/themeAugmentation'
+import { MUI_BREAKPOINT_VALUES } from '@/constants/breakpoints'
 
 /*
  * Full Tailwind v3 color palette as hex values.
@@ -330,6 +331,9 @@ declare module '@mui/material/Typography' {
 
 export const getTheme = (mode: PaletteMode) =>
   createTheme({
+    breakpoints: {
+      values: MUI_BREAKPOINT_VALUES,
+    },
     palette: {
       mode,
       primary: {