sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +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` 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 --> <!-- Mobile layout -->
<div class="flex flex-col gap-4 sm:hidden"> <div class="flex flex-col gap-4 sm:hidden">
<!-- Centered VibeTunnel title with stats --> <!-- 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 --> <!-- Compact Header -->
<div <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" 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"> <div class="flex items-center gap-3 min-w-0 flex-1">
<button <button

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

@ -13,6 +13,23 @@
outline: none; outline: none;
box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.3); 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 */ /* Custom components */