mahutt
diff --git a/‎cue-client/index.html‎
Lines changed: 9 additions & 1 deletion b/‎cue-client/index.html‎
Lines changed: 9 additions & 1 deletion
diff --git a/‎cue-client/public/apple-icon-180.png‎
4.72 KB b/‎cue-client/public/apple-icon-180.png‎
4.72 KB
diff --git a/‎cue-client/public/favicon-196.png‎
5.15 KB b/‎cue-client/public/favicon-196.png‎
5.15 KB
diff --git a/‎cue-client/public/manifest-icon-192.maskable.png‎
5.03 KB b/‎cue-client/public/manifest-icon-192.maskable.png‎
5.03 KB
diff --git a/‎cue-client/public/manifest-icon-512.maskable.png‎
15.3 KB b/‎cue-client/public/manifest-icon-512.maskable.png‎
15.3 KB
diff --git a/‎cue-client/public/manifest.json‎
Lines changed: 27 additions & 1 deletion b/‎cue-client/public/manifest.json‎
Lines changed: 27 additions & 1 deletion
diff --git a/‎cue-client/src/App.tsx‎
Lines changed: 1 addition & 1 deletion b/‎cue-client/src/App.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎cue-client/src/components/sidebar/collapsible-column.tsx‎
Lines changed: 1 addition & 1 deletion b/‎cue-client/src/components/sidebar/collapsible-column.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎cue-client/src/index.css‎
Lines changed: 6 additions & 0 deletions b/‎cue-client/src/index.css‎
Lines changed: 6 additions & 0 deletions
@@ -4,10 +4,18 @@
         <link rel="manifest" href="/manifest.json" />
         <meta charset="UTF-8" />
         <link rel="icon" href="/favicon.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable:false"
+        />
         <title>cue</title>
         <link rel="preconnect" href="https://rsms.me/" />
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <link rel="icon" type="image/png" sizes="196x196" href="/favicon-196.png" />
+        <link rel="apple-touch-icon" href="/apple-icon-180.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
     </head>
     <body>
         <div id="root"></div>
 
@@ -1,4 +1,30 @@
 {
     "display": "standalone",
-    "short_name": "Cue.is"
+    "short_name": "cue.is",
+    "icons": [
+        {
+            "src": "public/manifest-icon-192.maskable.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "public/manifest-icon-192.maskable.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "public/manifest-icon-512.maskable.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "public/manifest-icon-512.maskable.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
 }
@@ -13,7 +13,7 @@ function App() {
     return (
         <div id="app">
             <CollapsibleColumn />
-            <main>
+            <main className="standalone:pt-[env(safe-area-inset-top)]">
                 <div className="flex gap-2 p-4">
                     <Button variant="secondary" type="button" onClick={toggleSidebar}>
                         <Menu size={16} strokeWidth={1.5} />
 
@@ -11,7 +11,7 @@ export default function CollapsibleColumn() {
     const { isSidebarOpen, closeSidebar } = useSidebar();
     return (
         <div
-            className="z-10 absolute l-0 h-full bg-white md:static shadow"
+            className="z-10 absolute l-0 h-full bg-white md:static shadow standalone:pt-[env(safe-area-inset-top)]"
             style={{ overflow: 'hidden', transition: 'all 0.2s ease-out', width: isSidebarOpen ? 260 : 0 }}
         >
             <div className="flex flex-col w-[260px] max-h-dvh overflow-y-auto p-3">
 
@@ -274,3 +274,9 @@ main #content {
         @apply bg-background text-foreground;
     }
 }
+
+@custom-variant standalone {
+    @media (display-mode: standalone) {
+        @slot;
+    }
+}
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export default function CollapsibleColumn() {`
`11`	`11`	`const { isSidebarOpen, closeSidebar } = useSidebar();`
`12`	`12`	`return (`
`13`	`13`	`<div`
`14`		`- className="z-10 absolute l-0 h-full bg-white md:static shadow"`
	`14`	`+ className="z-10 absolute l-0 h-full bg-white md:static shadow standalone:pt-[env(safe-area-inset-top)]"`
`15`	`15`	`style={{ overflow: 'hidden', transition: 'all 0.2s ease-out', width: isSidebarOpen ? 260 : 0 }}`
`16`	`16`	`>`
`17`	`17`	`<div className="flex flex-col w-[260px] max-h-dvh overflow-y-auto p-3">`
Original file line number	Diff line number	Diff line change
`@@ -274,3 +274,9 @@ main #content {`
`274`	`274`	`@apply bg-background text-foreground;`
`275`	`275`	`}`
`276`	`276`	`}`
	`277`	`+`
	`278`	`+@custom-variant standalone {`
	`279`	`+ @media (display-mode: standalone) {`
	`280`	`+ @slot;`
	`281`	`+ }`
	`282`	`+}`