ios gutter

Author: jekrch

src/App.tsx

@@ -419,8 +419,12 @@ const App: React.FC = () => {
 
       <div
         className={classNames(
-          "site-content flex flex-col h-screen tour-step-16 tour-step-17 tour-step-18 normal-bg",
-          { 'star-sky': theme.includes('ab') }
+          "site-content flex flex-col tour-step-16 tour-step-17 tour-step-18 normal-bg",
+          {
+            'star-sky': theme.includes('ab'),
+            'view-mode': !showUnranked,
+            'h-screen': showUnranked,
+          }
         )}>
 
         {theme.includes("ab") &&
@@ -597,7 +601,7 @@ const App: React.FC = () => {
         </Suspense>
       )}
 
-    {(modalState.sortTour.isOpen || modalState.sortTour.hasRendered) && (
+      {(modalState.sortTour.isOpen || modalState.sortTour.hasRendered) && (
         <Suspense fallback={<div />}>
           <LazyJoyrideTourSort
             openSortModal={openSorterModal}
@@ -617,8 +621,8 @@ const App: React.FC = () => {
         onClose={closeSorterModal}
         initialItems={getItemsToSort()}
       />
-      
-        {/* <CanvasDevModal
+
+      {/* <CanvasDevModal
           isOpen={isDevModalOpen}
           onClose={() => setIsDevModalOpen(false)}
         /> */}

src/index.css

@@ -3,7 +3,8 @@
 @import 'tailwindcss/utilities';
 
 html {
-   padding: env(safe-area-inset); 
+   padding-left: env(safe-area-inset-left); 
+   padding-right: env(safe-area-inset-right); 
 }
 
 html,
@@ -76,13 +77,30 @@ code {
   height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
   overflow: hidden;
   max-height: -webkit-fill-available;
-  /* background: radial-gradient(ellipse at bottom, #28355E 0%, #06070d 100%); */
   background: radial-gradient(ellipse at bottom, var(--er-ranked-bg-end) 0%, var(--er-nav-gradient-start) 100%);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   animation: bg-pulse 10s infinite ease-in-out;
 }
 
+/* Ranked list / view mode: extend the container through the full
+*/
+.normal-bg.view-mode {
+  padding-bottom: 0;
+  height: 100lvh;
+  max-height: none;
+  min-height: 100lvh;
+  overflow: hidden;
+}
+
+/* Override the --vh-based height cap in view mode so the container
+   can extend behind the iOS Safari toolbar */
+.site-content.view-mode {
+  max-height: none;
+  min-height: 100lvh;
+  height: 100lvh;
+}
+
 /* GRADIENT BACKGROUNDS - THEMED */
 .choice-background {
   background: linear-gradient(155deg, var(--er-choice-bg-1), var(--er-choice-bg-2), var(--er-choice-bg-3)), url(/noise.svg);
@@ -432,6 +450,12 @@ code {
   background: linear-gradient(to bottom, var(--er-ranked-bg-start), var(--er-ranked-bg-end)); 
 }
 
+/* In view mode, add bottom padding inside the scrollable list so 
+   the last card isn't stuck behind the iOS Safari toolbar */
+.view-mode .ranked-items-background {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
+}
+
 .ranked-bar-background {
   /* Empty - can add themed gradient if needed */
 }