feat(profile): align settings with dashboard layout

resources/js/components/common/Logo.vue

@@ -16,13 +16,17 @@ const { config } = useAuth()
 </script>
 
 <template>
-  <component :is="linkToHome ? Link : 'div'" :href="linkToHome ? '/' : undefined" class="flex items-center gap-3">
+  <component
+    :is="linkToHome ? Link : 'div'"
+    :href="linkToHome ? '/' : undefined"
+    class="flex min-w-0 items-center gap-3 overflow-hidden"
+  >
     <!--
       Replace this placeholder with your actual logo:
       <img src="/images/logo.svg" alt="Logo" :class="iconSizeClass">
     -->
     <div
-      class="flex items-center justify-center rounded-xl bg-primary-500 text-white font-bold"
+      class="flex shrink-0 items-center justify-center rounded-xl bg-primary-500 text-white font-bold"
       :class="{
         'size-8 text-sm': size === 'sm',
         'size-12 text-xl': size === 'md',
@@ -34,7 +38,7 @@ const { config } = useAuth()
 
     <span
       v-if="showText"
-      class="font-semibold text-gray-900 dark:text-white"
+      class="min-w-0 truncate font-semibold text-gray-900 dark:text-white"
       :class="{
         'text-lg': size === 'sm',
         'text-2xl': size === 'md',