refactor: introduce mobile panel height variable and update related styles (#465)

Author: alanrsoares

packages/frontend-main/src/components/popups/ReplyDialog.vue

@@ -69,8 +69,8 @@ function handleInputValidity(value: boolean) {
               <Username :user-address="reply.author" />
               <PrettyTimestamp :timestamp="new Date(reply.timestamp)" />
             </div>
-            <!-- clamp content width to prevent overflow -->
-            <div class="max-w-[calc(min(512px,100dvw)-6rem)] overflow-x-auto">
+            <!-- clamp content width to prevent overflow. 6rem accounts for the left offset -->
+            <div class="max-w-[calc(min(512px,100dvw)-6rem)]">
               <PostMessage :message="reply.message" />
             </div>
           </div>

packages/frontend-main/src/components/posts/PostMessage.vue

@@ -60,7 +60,7 @@ const parsedMessage = computed((): MessageSegment[] => {
         :href="segment.content"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-blue-500 hover:underline font-medium"
+        class="text-blue-500 hover:underline font-medium wrap-anywhere"
         @click.stop=""
       >
         {{ segment.content }}

packages/frontend-main/src/components/ui/dialog/ResponsiveDialogContent.vue

@@ -227,7 +227,7 @@ const overlayStyle = computed(() => {
         v-bind="forwarded"
         :class="
           cn(
-            'fixed right-0 bottom-[58px] left-0 z-[51]',
+            'fixed right-0 bottom-mobile-header left-0 z-[51]',
             'grid max-h-[90vh] w-full gap-4',
             'overflow-y-auto',
             'rounded-t-lg border-t border-r border-l bg-background',

packages/frontend-main/src/layouts/MainLayoutMobile.vue

@@ -4,15 +4,15 @@ import TopPanel from './panels/TopPanel.vue';
 </script>
 
 <template>
-  <div class="w-full h-[58px] sticky top-0 z-99">
+  <div class="w-full h-mobile-panel sticky top-0 z-99">
     <TopPanel />
   </div>
 
-  <main class="min-h-[100vh]">
+  <main class="min-h-dvh flex flex-col flex-1">
     <slot />
   </main>
 
-  <div class="w-full h-[58px] sticky bottom-0 z-99">
+  <div class="w-full h-mobile-panel sticky bottom-0 z-99">
     <BottomPanel />
   </div>
 </template>

packages/frontend-main/src/style.css

@@ -41,6 +41,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --height-mobile-panel: var(--mobile-panel-height);
 }
 
 :root {
@@ -78,6 +79,7 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
   --main-min-width-desktop: 640px;
+  --mobile-panel-height: 58px;
   --text-2xl: 2rem; /* 32px */
   --text-xl: 1.6875rem; /* 27px */
   --text-lg: 1.5rem; /* 24px */

packages/frontend-main/src/views/AboutView.vue

@@ -38,7 +38,7 @@ function handleActionClick(url: string) {
 
 <template>
   <MainLayout>
-    <div class="flex flex-col h-full">
+    <div class="flex flex-col h-[calc(100dvh-2*var(--mobile-panel-height))]">
       <ViewHeading :title="$t('components.Headings.about')" />
 
       <div class="flex flex-col flex-1">