Never ending work on styles

src/lib/e_app_sys_menu.svelte

@@ -149,46 +149,47 @@ max-w-max -->
         duration-200 hover:duration-200
         ease-in-out
         "
-    >
+    title="
-
-    {#if $ae_loc?.person_id || $ae_loc?.user_id}
-    <!-- class:hidden={!expand}
-    class:hover:visible={expand}
-    class:invisible={!expand} -->
-    <div
-        class="flex flex-col gap-1 items-start justify-center transition-all w-full group"
-        title="
         ID: {$ae_loc?.person_id ?? '-- not set --'} / {$ae_loc?.user_id ?? '-- not set --'}
         Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
         Username: {$ae_loc?.user?.username ?? '-- not set --'}
         Email: {$ae_loc?.user?.email ?? '-- not set --'}
+        Access Type: {$ae_loc?.access_type ?? '-- not set --'}
         "
+    >
+
+    {#if $ae_loc?.person_id}
+    <div
+        class="flex flex-row gap-1 items-center justify-end transition-all w-full group"
         >
-        <span class="flex flex-row gap-1 w-16">
+            <User size="1em" class="mx-1 inline-block text-gray-500" />
-            <User class="mx-1 inline-block text-gray-500" />
             <span
                 class:hidden={!expand}
                 class="group-hover:inline-block"
                 >
-                {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
+                {$ae_loc?.person?.informal_name ?? $ae_loc?.person?.given_name}
             </span>
-        </span>
+    </div>
+    {/if}
 
-        <span class:hidden={!expand} class="">
+    {#if $ae_loc?.user_id}
-            <!-- <ShieldUser /> -->
+    <div
-            <ShieldUser class="mx-1 inline-block text-gray-500" />
+        class="flex flex-row gap-1 items-center justify-end transition-all w-full group"
-            <span>
+        >
-                {$ae_loc?.user?.username ?? '-- not set --'}
+        <ShieldUser size="1em" class="mx-1 inline-block text-gray-500" />
-            </span>
+        <span
+            class:hidden={!expand}
+            class="group-hover:inline-block"
+            >
+            {$ae_loc?.user?.username ?? '-- not set --'}
         </span>
     </div>
     {/if}
 
-
+    <div class="flex flex-row gap-1 items-center justify-end transition-all w-full group">
-    <div class="flex flex-row gap-1 items-center justify-end transition-all w-full">
         {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
             <span
-                class="flex flex-row-reverse gap-1 group"
+                class="flex flex-row-reverse gap-1 group text-base"
                 title={`Current access type/level: ${$ae_loc.access_type}`}
                 >
                 <!-- <span class="fas fa-unlock mx-1"></span> -->
@@ -268,7 +269,7 @@ max-w-max -->
                     >
                     <!-- <span class="fas fa-lock mx-1"></span> -->
                     <!-- <ShieldMinus /> -->
-                    <ShieldEllipsis class="inline-block" />
+                    <ShieldEllipsis size="2em" class="inline-block" />
                     <span class="hidden group-hover:inline-block">Passcode?</span>
 
                 </button>
@@ -366,14 +367,15 @@ max-w-max -->
                 preset-outlined-warning-800-200
                 hover:preset-tonal-success
                 transition-all group
+                min-w-22 md:min-w-30 w-full max-w-fit
                 gap-1
                 "
-            title="Edit mode is currently enabled. Click to disable."
+            title="Click to turn off edit mode. Edit mode is currently on."
             >
             <span class="fas fa-toggle-on m-1 inline-block"></span>
-            <span class="">Edit</span>
+            <span class="text-xs">Edit</span>
-            <span class="hidden group-hover:inline-block">
+            <span class="hidden group-hover:inline-block group-hover:text-xs">
-                Mode
+                Off
             </span>
         </button>
     {:else if $ae_loc.authenticated_access}
@@ -389,15 +391,15 @@ max-w-max -->
                 preset-outlined-warning-400-600
                 hover:preset-tonal-warning
                 transition-all group
+                min-w-22 md:min-w-30 w-full max-w-fit
                 gap-1
-                min-w-24
                 "
-            title="Edit mode is currently disabled. Click to enable."
+            title="Click to torn on/enable edit mode. Edit mode is currently off/disabled."
             >
-            <span class="fas fa-toggle-off m-1 inline"></span>
+            <span class="fas fa-toggle-off m-1 inline-block"></span>
-            <span class="inline">Edit</span>
+            <span class="text-xs">Edit</span>
-            <span class="hidden group-hover:inline">
+            <span class="hidden group-hover:inline-block group-hover:text-xs">
-                Mode?
+                On?
             </span>
         </button>
     {/if}
@@ -416,8 +418,8 @@ max-w-max -->
             preset-filled-tertiary-400-600
             preset-outlined-tertiary-400-600
             hover:preset-filled-success active:preset-filled-success
-            px-6 py-1
+            px-2 py-1
-            min-w-24
+            min-w-22 md:min-w-30 w-full max-w-fit
             transition-all group
             "
         title="Show/Hide the system menu"
@@ -454,11 +456,11 @@ max-w-max -->
         {#if expand}
             <CircleX class="m-1 inline-block" />
             <span class="hidden group-hover:inline-block">
-                Hide Menu
+                Menu
             </span>
         {:else}
             <Menu class="m-1 inline-block" />
-            <span class="hidden group-hover:inline-block">
+            <span class="text-xs hidden group-hover:inline-block">
                 Menu
             </span>
         {/if}