From ea1e07c74fc85aa6a7e005b796646094e623e6d3 Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.fr>
Date: Thu, 30 Jul 2026 11:47:30 +0200
Subject: [PATCH] fix: polish assistant mobile layout

---
 .../assistant/assistant-panel.module.css      | 85 ++++++++++++++++---
 .../components/assistant/assistant-panel.tsx  | 34 ++++++--
 2 files changed, 98 insertions(+), 21 deletions(-)

diff --git a/apps/nextjs/src/components/assistant/assistant-panel.module.css b/apps/nextjs/src/components/assistant/assistant-panel.module.css
index a8d14124c..60b21290f 100644
--- a/apps/nextjs/src/components/assistant/assistant-panel.module.css
+++ b/apps/nextjs/src/components/assistant/assistant-panel.module.css
@@ -2,7 +2,7 @@
   position: fixed;
   z-index: 290;
   inset-inline-start: 50%;
-  bottom: 1rem;
+  bottom: max(1rem, env(safe-area-inset-bottom));
   display: flex;
   width: min(31rem, calc(100vw - 1rem));
   min-height: 3.5rem;
@@ -39,6 +39,11 @@
   color: var(--mantine-color-dimmed);
 }
 
+.activityDismiss {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
 .floatingPanel {
   position: fixed;
   z-index: 290;
@@ -68,6 +73,24 @@
   border-bottom: 1px solid var(--mantine-color-default-border);
 }
 
+.panelIdentity,
+.panelIdentityText {
+  min-width: 0;
+}
+
+.panelIdentity {
+  flex: 1;
+}
+
+.panelActions {
+  flex: 0 0 auto;
+}
+
+.panelAction {
+  width: 2.625rem;
+  height: 2.625rem;
+}
+
 .historyMenu {
   background: var(--mantine-color-body);
 }
@@ -90,6 +113,7 @@
 }
 
 .viewport {
+  position: relative;
   display: flex;
   min-height: 0;
   flex: 1;
@@ -186,6 +210,11 @@
   font: inherit;
 }
 
+.composerInput::placeholder {
+  color: var(--mantine-color-dimmed);
+  opacity: 1;
+}
+
 .empty {
   display: flex;
   min-height: 23rem;
@@ -212,10 +241,14 @@
 }
 
 .scrollToBottom {
-  position: absolute;
-  inset-inline-start: 50%;
+  position: sticky;
   bottom: 0.75rem;
-  transform: translateX(-50%);
+  z-index: 1;
+  flex: 0 0 auto;
+  align-self: center;
+  margin-top: -2.5rem;
+  margin-bottom: 0.75rem;
+  box-shadow: var(--mantine-shadow-sm);
 }
 
 @keyframes assistant-activity-in {
@@ -244,18 +277,34 @@
 
 @media (max-width: 48em) {
   .activityBar {
-    bottom: 0.5rem;
+    bottom: max(0.5rem, env(safe-area-inset-bottom));
   }
 
   .floatingPanel {
-    bottom: 0.5rem;
+    bottom: max(0.5rem, env(safe-area-inset-bottom));
     width: calc(100vw - 1rem);
-    height: min(44rem, calc(100dvh - 1rem));
-    min-height: min(20rem, calc(100dvh - 1rem));
+    height: min(44rem, calc(100dvh - 1rem - env(safe-area-inset-bottom)));
+    min-height: min(20rem, calc(100dvh - 1rem - env(safe-area-inset-bottom)));
   }
 
   .panelHeader {
-    padding-inline-start: 0.7rem;
+    min-height: 3.5rem;
+    padding: 0.5rem;
+    padding-inline-start: 0.65rem;
+  }
+
+  .composerWrap {
+    padding: 0.5rem;
+  }
+
+  .composer {
+    gap: 0.25rem;
+    padding: 0.25rem 0.3rem;
+  }
+
+  .composerInput {
+    min-height: 2.625rem;
+    padding: 0.6rem 0.55rem;
   }
 
   .suggestions {
@@ -263,15 +312,17 @@
   }
 
   .empty {
-    min-height: 32rem;
+    min-height: 26rem;
     padding-block: 1.5rem;
   }
 }
 
 @media (max-width: 30em) {
   .historyButton {
-    max-width: 2.25rem;
-    padding-inline: 0.5rem;
+    width: 2.625rem;
+    max-width: 2.625rem;
+    height: 2.625rem;
+    padding-inline: 0.75rem;
   }
 
   .historyButtonSection {
@@ -283,7 +334,15 @@
   }
 
   .messages {
-    padding-inline: 0.75rem;
+    padding: 0.5rem 0.75rem 1rem;
+  }
+
+  .message {
+    margin-block: 0.7rem;
+  }
+
+  .userMessage {
+    max-width: 92%;
   }
 }
 
diff --git a/apps/nextjs/src/components/assistant/assistant-panel.tsx b/apps/nextjs/src/components/assistant/assistant-panel.tsx
index 43415d2fd..94149ccb5 100644
--- a/apps/nextjs/src/components/assistant/assistant-panel.tsx
+++ b/apps/nextjs/src/components/assistant/assistant-panel.tsx
@@ -339,6 +339,7 @@ const ConversationHistory = () => {
           leftSection={<IconHistory size={16} />}
           classNames={{ section: classes.historyButtonSection, label: classes.historyButtonLabel }}
           onClick={() => setOpened((current) => !current)}
+          aria-label={opened ? t("closeHistory") : t("openHistory")}
         >
           {t("conversations")}
         </Button>
@@ -489,7 +490,13 @@ const AssistantActivityBar = ({
         </Group>
       </UnstyledButton>
       {!isRunning && !needsApproval && (
-        <ActionIcon variant="subtle" color="gray" size="sm" onClick={onMarkRead} aria-label={t("activity.dismiss")}>
+        <ActionIcon
+          className={classes.activityDismiss}
+          variant="subtle"
+          color="gray"
+          onClick={onMarkRead}
+          aria-label={t("activity.dismiss")}
+        >
           <IconX size={15} />
         </ActionIcon>
       )}
@@ -529,13 +536,13 @@ export const AssistantPanel = ({
       )}
       {opened && (
         <dialog className={classes.floatingPanel} aria-label={t("title")} open>
-          <Group className={classes.panelHeader} justify="space-between" wrap="nowrap">
-            <Group gap="xs" wrap="nowrap">
+          <Group className={classes.panelHeader} justify="space-between" wrap="nowrap" gap="xs">
+            <Group className={classes.panelIdentity} gap="xs" wrap="nowrap">
               <ThemeIcon variant="light" color="red" radius="xl">
                 <IconRobot size={18} />
               </ThemeIcon>
-              <div>
-                <Text fw={700} lh={1.1}>
+              <div className={classes.panelIdentityText}>
+                <Text fw={700} lh={1.1} lineClamp={1}>
                   {t("title")}
                 </Text>
                 <Text size="xs" c="dimmed" lineClamp={1}>
@@ -543,16 +550,27 @@ export const AssistantPanel = ({
                 </Text>
               </div>
             </Group>
-            <Group gap={2} wrap="nowrap">
+            <Group className={classes.panelActions} gap={2} wrap="nowrap">
               <ConversationHistory />
               <Tooltip label={t("newConversation")}>
                 <ThreadListPrimitive.New asChild>
-                  <ActionIcon variant="subtle" color="gray" aria-label={t("newConversation")}>
+                  <ActionIcon
+                    className={classes.panelAction}
+                    variant="subtle"
+                    color="gray"
+                    aria-label={t("newConversation")}
+                  >
                     <IconPlus size={17} />
                   </ActionIcon>
                 </ThreadListPrimitive.New>
               </Tooltip>
-              <ActionIcon variant="subtle" color="gray" onClick={onClose} aria-label={t("close")}>
+              <ActionIcon
+                className={classes.panelAction}
+                variant="subtle"
+                color="gray"
+                onClick={onClose}
+                aria-label={t("close")}
+              >
                 <IconX size={18} />
               </ActionIcon>
             </Group>