fix(ui): improve sidebar accessibility and responsiveness on zoom and small screens

packages/app/src/pages/home.tsx

@@ -53,8 +53,8 @@ export default function Home() {
   }
 
   return (
-    <div class="mx-auto mt-55 w-full md:w-auto px-4">
-      <Logo class="md:w-xl opacity-12" />
+    <div class="mx-auto mt-8 md:mt-12 w-full max-w-lg px-4">
+      <Logo class="w-full md:w-xl opacity-12" />
       <Button
         size="large"
         variant="ghost"
@@ -73,7 +73,7 @@ export default function Home() {
       </Button>
       <Switch>
         <Match when={sync.data.project.length > 0}>
-          <div class="mt-20 w-full flex flex-col gap-4">
+          <div class="mt-8 md:mt-12 w-full flex flex-col gap-3">
             <div class="flex gap-2 items-center justify-between pl-3">
               <div class="text-14-medium text-text-strong">Recent projects</div>
               <Button icon="folder-add-left" size="normal" class="pl-2 pr-3" onClick={chooseProject}>

packages/app/src/pages/layout.tsx

@@ -860,21 +860,21 @@ export default function Layout(props: ParentProps) {
                  hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover"
         >
           <Tooltip placement={props.mobile ? "bottom" : "right"} value={props.session.title} gutter={10}>
-            <A
-              href={`${props.slug}/session/${props.session.id}`}
-              class="flex flex-col min-w-0 text-left w-full focus:outline-none pl-4 pr-2 py-1"
-              onMouseEnter={() => prefetchSession(props.session, "high")}
-              onFocus={() => prefetchSession(props.session, "high")}
-            >
-              <div class="flex items-center self-stretch gap-6 justify-between transition-[padding] group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7">
-                <span
-                  classList={{
-                    "text-14-regular text-text-strong overflow-hidden text-ellipsis truncate": true,
-                    "animate-pulse": isWorking(),
-                  }}
-                >
-                  {props.session.title}
-                </span>
+              <A
+                href={`${props.slug}/session/${props.session.id}`}
+                class="flex flex-col min-w-0 text-left w-full focus:outline-none pl-4 pr-6 py-1"
+                onMouseEnter={() => prefetchSession(props.session, "high")}
+                onFocus={() => prefetchSession(props.session, "high")}
+              >
+                <div class="flex items-center self-stretch gap-2 justify-between min-w-0">
+                  <span
+                    classList={{
+                      "text-14-regular text-text-strong truncate min-w-0": true,
+                      "animate-pulse": isWorking(),
+                    }}
+                  >
+                    {props.session.title}
+                  </span>
                 <div class="shrink-0 group-hover/session:hidden group-active/session:hidden group-focus-within/session:hidden">
                   <Switch>
                     <Match when={isWorking()}>
@@ -986,7 +986,9 @@ export default function Layout(props: ParentProps) {
                     expandable
                     notify={!isExpanded()}
                   />
-                  <span class="truncate text-14-medium text-text-strong">{name()}</span>
+                    <Tooltip placement="right" value={name()} inactive={showExpanded()}>
+                      <span class="text-14-medium text-text-strong truncate">{name()}</span>
+                    </Tooltip>
                 </Collapsible.Trigger>
                 <div class="flex invisible gap-1 items-center group-hover/session:visible has-[[data-expanded]]:visible">
                   <DropdownMenu>
@@ -1034,9 +1036,9 @@ export default function Layout(props: ParentProps) {
                               class="flex flex-col gap-1 min-w-0 text-left w-full focus:outline-none"
                             >
                               <div class="flex items-center self-stretch gap-6 justify-between">
-                                <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate">
-                                  New session
-                                </span>
+                              <span class="text-14-regular text-text-strong break-words">
+                                New session
+                              </span>
                               </div>
                             </A>
                           </Tooltip>
@@ -1245,11 +1247,8 @@ export default function Layout(props: ParentProps) {
     <div class="relative flex-1 min-h-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text">
       <div class="flex-1 min-h-0 flex">
         <div
-          classList={{
-            "hidden xl:block": true,
-            "relative shrink-0": true,
-          }}
-          style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : "48px" }}
+          class="relative shrink-0"
+          style={{ width: layout.sidebar.opened() ? `min(${layout.sidebar.width()}px, 25vw)` : "48px" }}
         >
           <div
             classList={{

packages/ui/src/components/logo.css

@@ -1,4 +1,6 @@
 [data-component="logo-mark"] {
-  width: 16px;
+  width: 100%;
+  max-width: 16px;
   aspect-ratio: 4/5;
+  height: auto;
 }