feat: keep timeline at 600px for md and lg screens

components/nav/NavSide.vue

@@ -20,7 +20,7 @@ const { notifications } = useNotifications()
     </NavSideItem>
 
     <!-- Use Search for small screens once the right sidebar is collapsed -->
-    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" lg:hidden :command="command" />
+    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" xl:hidden :command="command" />
     <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" :command="command" />
 
     <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " :command="command" />

components/nav/NavSideItem.vue

@@ -60,7 +60,7 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
         flex items-center gap4
         w-fit rounded-full
         px2 py2 mx3 sm:mxa
-        lg="mx0 px5"
+        xl="mx0 px5"
         transition-100
         group-hover:bg-active group-focus-visible:ring="2 current"
       >
@@ -68,7 +68,7 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
           <div :class="icon" text-xl />
         </slot>
         <slot>
-          <span block sm:hidden lg:block>{{ text }}</span>
+          <span block sm:hidden xl:block>{{ text }}</span>
         </slot>
       </div>
     </CommonTooltip>

components/nav/NavTitle.vue

@@ -8,15 +8,15 @@ const sub = env === 'local' ? 'dev' : env === 'staging' ? 'preview' : 'alpha'
   <NuxtLink
     flex items-end gap-2
     w-fit
-    py2 px-2 lg:px-3
+    py2 px-2 xl:px-3
     text-2xl hover:bg-active
     focus-visible:ring="2 current"
     rounded-full
     to="/"
     external
   >
-    <img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 lg:h-10 class="rtl-flip">
-    <div hidden lg:block>
+    <img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip">
+    <div hidden xl:block>
       {{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ sub }}</sup>
     </div>
   </NuxtLink>

components/publish/PublishButton.vue

@@ -7,7 +7,7 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
   <button
     flex="~ gap2 center"
     w-9 h-9 py2
-    lg="w-auto h-auto py-4"
+    xl="w-auto h-auto py-4"
     rounded-full
     cursor-pointer disabled:pointer-events-none
     text-primary font-bold
@@ -17,6 +17,6 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
     @click="openPublishDialog()"
   >
     <div i-ri:quill-pen-line />
-    <span hidden lg:block>{{ $t('action.compose') }}</span>
+    <span hidden xl:block>{{ $t('action.compose') }}</span>
   </button>
 </template>

components/user/UserDropdown.vue

@@ -1,8 +1,8 @@
 <template>
   <VDropdown :distance="0" placement="top-start">
     <button btn-action-icon :aria-label="$t('action.switch_account')">
-      <div :class="{ 'hidden lg:block': currentUser }" i-ri:more-2-line />
-      <AccountAvatar v-if="currentUser" lg:hidden :account="currentUser.account" w-9 h-9 />
+      <div :class="{ 'hidden xl:block': currentUser }" i-ri:more-2-line />
+      <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 />
     </button>
     <template #popper="{ hide }">
       <UserSwitcher @click="hide" />

layouts/default.vue

@@ -7,23 +7,23 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
 <template>
   <div h-full :class="{ zen: isZenMode }">
     <main flex w-full mxa lg:max-w-80rem>
-      <aside class="hidden sm:flex w-1/8 md:w-1/6 justify-end lg:w-1/4 zen-hide" relative>
-        <div sticky top-0 w-20 lg:w-100 h-screen flex="~ col" lt-lg-items-center>
+      <aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end zen-hide" relative>
+        <div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
           <slot name="left">
             <NavTitle mt4 mb2 lg:mx-3 />
             <div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
               <div flex flex-col>
                 <NavSide command />
-                <PublishButton m="y5 xa" lg:m="r5 l3" lg:rtl-m="l5 r3" />
+                <PublishButton m="y5 xa" xl:m="r5 l3" xl:rtl-m="l5 r3" />
               </div>
               <div v-if="isMastoInitialised" flex flex-col>
                 <UserSignInEntry v-if="!currentUser" sm:hidden />
                 <div v-if="currentUser" p6 pb8 w-full>
-                  <div hidden lg-block>
+                  <div hidden xl-block>
                     <UserPicker v-if="showUserPicker" />
                     <div v-else flex="~" items-center justify-between>
                       <NuxtLink
-                        hidden lg:block
+                        hidden xl:block
                         rounded-full text-start w-full
                         hover:bg-active cursor-pointer transition-100
                         :to="getAccountRoute(currentUser.account)"
@@ -33,14 +33,14 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
                       <UserDropdown />
                     </div>
                   </div>
-                  <UserDropdown lg:hidden />
+                  <UserDropdown xl:hidden />
                 </div>
               </div>
             </div>
           </slot>
         </div>
       </aside>
-      <div class="w-full min-h-screen" :class="wideLayout ? 'lg:w-full sm:w-600px' : 'sm:w-600px'" sm:border-l sm:border-r border-base>
+      <div w-full min-h-screen md:shrink-0 :class="wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px'" sm:border-l sm:border-r border-base>
         <div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
           <slot />
         </div>