sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-26 15:07:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: iOS top safe area not respected #50

Browse source
This commit is contained in:
Peter Steinberger 2025-06-22 23:53:27 +02:00
parent 1325085986
commit ad90606f73
3 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/client/components/app-header.ts
View file

@ -73,7 +73,10 @@ export class AppHeader extends LitElement {
}
return html`
<div class="app-header bg-dark-bg-secondary border-b border-dark-border p-6">
<div
class="app-header bg-dark-bg-secondary border-b border-dark-border p-6"
style="padding-top: max(1.5rem, calc(1.5rem + env(safe-area-inset-top)));"
>
<!-- Mobile layout -->
<div class="flex flex-col gap-4 sm:hidden">
<!-- Centered VibeTunnel title with stats -->

1
web/src/client/components/session-view.ts
View file

@ -1045,6 +1045,7 @@ export class SessionView extends LitElement {
<!-- Compact Header -->
<div
class="flex items-center justify-between px-3 py-2 border-b border-dark-border text-sm min-w-0 bg-dark-bg-secondary"
style="padding-top: max(0.5rem, env(safe-area-inset-top)); padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right));"
>
<div class="flex items-center gap-3 min-w-0 flex-1">
<button

17
web/src/client/styles.css
View file

@ -13,6 +13,23 @@
outline: none;
box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.3);
}
/* iOS Safe Area Support */
.safe-area-top {
padding-top: env(safe-area-inset-top);
}
.safe-area-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
.safe-area-left {
padding-left: env(safe-area-inset-left);
}
.safe-area-right {
padding-right: env(safe-area-inset-right);
}
}
/* Custom components */