snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Respect mobile Safari safe areas

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-05-07 16:47:27 +02:00
parent c4e82aabbe
commit b5b1814383
2 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/index.html
+2 -1
View File
@@ -2,10 +2,11 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<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" />
<title>Pi Web POC</title> <title>Pi Web POC</title>
<style> <style>
html, body { margin: 0; height: 100%; overflow: hidden; } html, body { margin: 0; height: 100%; overflow: hidden; }
body { min-height: 100dvh; }
</style> </style>
</head> </head>
<body> <body>
src/client/src/components/shared.ts
+1 -1
View File
@@ -24,7 +24,7 @@ export interface CompletionItem {
} }
export const appStyles = css` export const appStyles = css`
:host { display: block; height: 100vh; color: #e6edf3; background: #0d1117; font: 14px system-ui, sans-serif; } :host { display: block; height: 100dvh; box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color: #e6edf3; background: #0d1117; font: 14px system-ui, sans-serif; }
.shell { display: grid; grid-template-columns: 340px 1fr; height: 100%; min-height: 0; } .shell { display: grid; grid-template-columns: 340px 1fr; height: 100%; min-height: 0; }
aside { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #30363d; overflow: hidden; } aside { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #30363d; overflow: hidden; }
header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #30363d; } header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #30363d; }