calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3syisgbyq: Keep sheet controls clear of the home indicator with a safe-area bottom padding and viewport-fit cover

Browse Source
This commit is contained in:
calcazar
2026-10-20 08:44:38 -06:00
parent f4f3ae28fc
commit 695ebe1095
2 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+4 -1
View File
@@ -1,4 +1,4 @@
import type { Metadata } from "next"; import type { Metadata, Viewport } from "next";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import { Cormorant_Garamond, Manrope } from "next/font/google"; import { Cormorant_Garamond, Manrope } from "next/font/google";
import { DEFAULT_THEME, THEME_SCRIPT } from "@/lib/theme"; import { DEFAULT_THEME, THEME_SCRIPT } from "@/lib/theme";
@@ -33,6 +33,9 @@ const cormorant = Cormorant_Garamond({
display: "swap", display: "swap",
}); });
// viewport-fit=cover makes env(safe-area-inset-*) report the iPhone home indicator.
export const viewport: Viewport = { width: "device-width", initialScale: 1, viewportFit: "cover" };
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Minnect feed browser", title: "Minnect feed browser",
description: "Sign in with your Minnect account to read and write the home feed.", description: "Sign in with your Minnect account to read and write the home feed.",
src/styles/sheet.css
+1 -1
View File
@@ -29,7 +29,7 @@
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
max-height: 78%; max-height: 78%;
padding: 10px 14px calc(24px + env(safe-area-inset-bottom, 0px)); padding: 10px 14px max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
background: var(--bg); background: var(--bg);
color: var(--ink); color: var(--ink);
border-radius: 26px 26px 0 0; border-radius: 26px 26px 0 0;