ui: fix left aside some buttons width (#588)

components/nav/NavSideItem.vue

@@ -46,7 +46,14 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
 <template>
   <NuxtLink :to="to" :disabled="noUserDisable" :class="noUserVisual ? 'op25 pointer-events-none ' : ''" :active-class="activeClass" group focus:outline-none @click="$scrollToTop">
     <CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
-      <div flex w-fit px2 mx3 lg:mx0 lg:px5 py2 gap4 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
+      <div
+        flex items-center gap4
+        w-fit rounded-full
+        px2 py2 mx3 sm:mxa
+        lg="mx0 px5"
+        transition-100
+        group-hover:bg-active group-focus-visible:ring="2 current"
+      >
         <slot name="icon">
           <div :class="icon" text-xl />
         </slot>

components/nav/NavTitle.vue

@@ -5,8 +5,17 @@ const sub = env === 'local' ? 'dev' : env === 'staging' ? 'preview' : 'alpha'
 
 <template>
   <!-- Use external to force refresh page and jump to top of timeline -->
-  <NuxtLink flex px3 py2 items-center text-2xl gap-2 hover:bg-active focus-visible:ring="2 current" rounded-full to="/" external>
+  <NuxtLink
-    <img :alt="$t('app_logo')" src="/logo.svg" w-10 h-10 height="40" width="40">
+    flex items-center gap-2
+    w-fit
+    py2 px-2 lg: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>
     <div hidden lg:block>
       {{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ sub }}</sup>
     </div>

components/publish/PublishButton.vue

@@ -5,10 +5,15 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
 
 <template>
   <button
-    color-primary rounded-full ml-7 lg:ml-3 w-9 lg:w-auto font-bold py2 lg:py4 flex="~ gap2 center"
+    flex="~ gap2 center"
+    w-9 h-9 py2
+    lg="w-auto h-auto py-4"
+    rounded-full
     cursor-pointer disabled:pointer-events-none
-    text-primary border-1 border-primary
+    text-primary font-bold
-    :disabled="disabled" :class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
+    border-1 border-primary
+    :class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
+    :disabled="disabled"
     @click="openPublishDialog()"
   >
     <div i-ri:quill-pen-line />

layouts/default.vue

@@ -8,13 +8,13 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
   <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">
+        <div sticky top-0 w-20 lg:w-100 h-screen flex="~ col" lt-lg-items-center>
           <slot name="left">
-            <NavTitle mx3 mt4 mb2 self-start />
+            <NavTitle mt4 mb2 lg:mx-3 />
-            <div flex="~ col" overflow-y-auto justify-between h-full>
+            <div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
               <div flex flex-col>
                 <NavSide />
-                <PublishButton m5 />
+                <PublishButton m="y5 xa" lg:m="x5 l3" />
               </div>
               <div v-if="isMastoInitialised" flex flex-col>
                 <UserSignInEntry v-if="!currentUser" sm:hidden />