till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:21:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

💄 fix(calendar): improve mobile UX - hide tasks by default, integrate mic in input bar

Browse source 
- Change sidebarCollapsed default to true (tasks hidden by default on mobile)
- Add leftAction snippet slot to InputBar component
- Move VoiceRecordButton inside InputBar instead of floating position
- Remove obsolete voice-button-wrapper styles

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS 2026-02-13 19:35:37 +01:00
parent e62782f627
commit cdad7f5187
6 changed files with 48 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

34
apps/matrix/apps/web/src/app.css
View file

@ -78,3 +78,37 @@
@apply bg-white/90 dark:bg-white/20 backdrop-blur-sm border border-black/10 dark:border-white/20
hover:bg-white dark:hover:bg-white/30 hover:shadow-lg transition-all duration-200;
}
/* iOS Safe Area Insets for PWA */
.safe-area-top {
padding-top: env(safe-area-inset-top, 0px);
}
.safe-area-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-area-left {
padding-left: env(safe-area-inset-left, 0px);
}
.safe-area-right {
padding-right: env(safe-area-inset-right, 0px);
}
.safe-area-x {
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
.safe-area-y {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-area-all {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}

2
apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
View file

@ -349,7 +349,7 @@
}
</script>
<div class="p-3 pb-4 lg:pb-20">
<div class="p-3 pb-4 lg:pb-20 safe-area-bottom">
<!-- Reply/Edit Preview -->
{#if replyTo || editMessage}
<div

8
apps/matrix/apps/web/src/routes/(app)/+layout.svelte
View file

@ -217,7 +217,9 @@
{#if loading}
<!-- Loading State -->
<div class="flex h-screen flex-col items-center justify-center gap-4 bg-background">
<div
class="flex h-screen flex-col items-center justify-center gap-4 bg-background safe-area-top safe-area-bottom"
>
<CircleNotch class="h-12 w-12 animate-spin text-primary" />
<div class="text-center">
<p class="font-medium text-foreground">Connecting to Matrix...</p>
@ -236,7 +238,9 @@
</div>
{:else if initError}
<!-- Error State -->
<div class="flex h-screen flex-col items-center justify-center gap-4 p-4 bg-background">
<div
class="flex h-screen flex-col items-center justify-center gap-4 p-4 bg-background safe-area-top safe-area-bottom"
>
<div class="rounded-full bg-red-500/10 p-4">
<WarningCircle class="h-12 w-12 text-red-500" />
</div>

4
apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
View file

@ -136,10 +136,10 @@
{#if isMobile}
<!-- Mobile: Full-screen room list -->
<div class="flex flex-col h-full bg-background">
<div class="flex flex-col h-full bg-background safe-area-bottom">
<!-- User Info / Status Bar -->
<div
class="border-b border-black/10 dark:border-white/10 px-4 py-3 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl"
class="border-b border-black/10 dark:border-white/10 px-4 py-3 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl safe-area-top"
>
<div class="flex items-center justify-between">
<div>

2
apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
View file

@ -114,7 +114,7 @@
</script>
<!-- Full-screen chat view for mobile -->
<div class="flex flex-col h-full bg-background">
<div class="flex flex-col h-full bg-background safe-area-top">
{#if matrixStore.currentRoom}
<!-- Room Header with back button -->
<RoomHeader

8
apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
View file

@ -339,8 +339,8 @@
.theme-toggle {
position: absolute;
top: 1rem;
left: 1rem;
top: calc(1rem + env(safe-area-inset-top, 0px));
left: calc(1rem + env(safe-area-inset-left, 0px));
z-index: 50;
display: flex;
align-items: center;
@ -381,7 +381,7 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 1rem 1.5rem;
padding: calc(3rem + env(safe-area-inset-top, 0px)) 1rem 1.5rem;
animation: fadeInScale 0.5s ease-out both;
}
@ -428,7 +428,7 @@
flex: 1;
display: flex;
justify-content: center;
padding: 1rem 1rem 2rem;
padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
}
.form-card {