From 9f37feec4c72b40a16d623ab2bca91d5c114e2ca Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Wed, 28 May 2025 19:06:24 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20refine=20ui=20to=20dis?=
 =?UTF-8?q?play=20well=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rework thread panel, attachment and thread-messsage header
---
 .../forms/components/message-form/_index.scss | 14 ++++++++++++-
 .../layouts/components/main/layout/index.tsx  | 15 ++-----------
 .../components/thread-item/_index.scss        |  4 +++-
 .../components/thread-message/_index.scss     | 21 +++++++++++++++++--
 .../components/thread-message/index.tsx       | 12 +++++------
 .../thread-message/message-body.tsx           | 12 +++++------
 src/frontend/src/pages/_app.tsx               |  4 +++-
 src/frontend/src/pages/index.tsx              |  7 -------
 src/frontend/src/pages/mailbox/_index.scss    |  4 ++--
 9 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/src/frontend/src/features/forms/components/message-form/_index.scss b/src/frontend/src/features/forms/components/message-form/_index.scss
index d5365e32..25380a13 100644
--- a/src/frontend/src/features/forms/components/message-form/_index.scss
+++ b/src/frontend/src/features/forms/components/message-form/_index.scss
@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../../../../styles/cunningham-tokens" as *;
+@use "../../../../styles/utils" as *;
 
 .message-form {
     display: flex;
@@ -77,6 +78,17 @@
     align-items: center;
 }
 
+.attachment-uploader__input > .c__button {
+    white-space: nowrap;
+}
+
+@media screen and (max-width: breakpoint(xs)) {
+    .attachment-uploader__input {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
 .attachment-uploader__input__helper-text {
     font-size: 0.875rem;
     color: var(--c--theme--colors--greyscale-600);
@@ -92,6 +104,6 @@
 
 .attachment-bucket__list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
     gap: 10px;
 }
diff --git a/src/frontend/src/features/layouts/components/main/layout/index.tsx b/src/frontend/src/features/layouts/components/main/layout/index.tsx
index 7ba4d619..d3083043 100644
--- a/src/frontend/src/features/layouts/components/main/layout/index.tsx
+++ b/src/frontend/src/features/layouts/components/main/layout/index.tsx
@@ -8,7 +8,6 @@ import {
   PanelResizeHandle,
 } from "react-resizable-panels";
 import { DropdownMenuOption,LeftPanel } from "@gouvfr-lasuite/ui-kit";
-import { RightPanel } from "../right-panel";
 import { useControllableState } from "../hooks/useControllableState";
 export type MainLayoutProps = {
   icon?: React.ReactNode;
@@ -35,9 +34,7 @@ export const AppLayout = ({
   children,
   hideLeftPanelOnDesktop = false,
   leftPanelContent,
-  rightPanelContent,
   enableResize = false,
-  rightPanelIsOpen = false,
   ...props
 }: PropsWithChildren<MainLayoutProps>) => {
   const [isLeftPanelOpen, setIsLeftPanelOpen] = useControllableState(
@@ -125,16 +122,8 @@ export const AppLayout = ({
               )}
             </>
           )}
-          <Panel order={1}>
-            <div className="c__main-layout__content__center">
-              <div className="c__main-layout__content__center__children">
-                {children}
-              </div>
-
-              <RightPanel isOpen={rightPanelIsOpen}>
-                {rightPanelContent}
-              </RightPanel>
-            </div>
+          <Panel order={1} style={{ width: "100%" }}>
+              {children}
           </Panel>
         </PanelGroup>
       </div>
diff --git a/src/frontend/src/features/layouts/components/thread-panel/components/thread-item/_index.scss b/src/frontend/src/features/layouts/components/thread-panel/components/thread-item/_index.scss
index 4a558761..45ab7f85 100644
--- a/src/frontend/src/features/layouts/components/thread-panel/components/thread-item/_index.scss
+++ b/src/frontend/src/features/layouts/components/thread-panel/components/thread-item/_index.scss
@@ -71,6 +71,7 @@
     gap: var(--c--theme--spacings--2xs);
     line-height: 1;
     min-width: 0;
+    max-width: 100%;
 }
 
 .thread-item__senders,
@@ -80,6 +81,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
+    display: inline-block;
 }
 
 .thread-item__senders-container {
@@ -131,4 +133,4 @@
 .thread-item__date {
     width: 76px;
     text-align: right;
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/features/layouts/components/thread-view/components/thread-message/_index.scss b/src/frontend/src/features/layouts/components/thread-view/components/thread-message/_index.scss
index df8cfb84..a2c36482 100644
--- a/src/frontend/src/features/layouts/components/thread-view/components/thread-message/_index.scss
+++ b/src/frontend/src/features/layouts/components/thread-view/components/thread-message/_index.scss
@@ -1,3 +1,5 @@
+@use "../../../../../../styles/utils" as *;
+
 .thread-message {
     border-radius: 8px;
     background-color: white;
@@ -16,7 +18,7 @@
 }
 
 .thread-message__header-column--right {
-    gap: var(--c--theme--spacings--);
+    gap: var(--c--theme--spacings--xs);
 }
 
 .thread-message__header-actions {
@@ -31,6 +33,17 @@
     justify-content: space-between;
 }
 
+@media screen and (max-width: breakpoint(tablet)) {
+    .thread-message__header-rows {
+        flex-direction: column-reverse;
+    }
+
+    .thread-message__header-column--right {
+        justify-content: space-between;
+    }
+
+}
+
 .thread-message__header-rows > div > * {
     margin-block: 0;
 }
@@ -44,6 +57,10 @@
     color: var(--c--theme--colors--greyscale-500);
 }
 
+.thread-message__date {
+    text-align: right;
+}
+
 .thread-message__correspondents {
     display: grid;
     grid-template-columns: max-content 1fr;
@@ -57,13 +74,13 @@
 
 .thread-message__correspondents dd {
     margin: 0;
+    word-break: break-word;
 }
 
 .thread-message__body {
     width: 100%;
     height: auto;
     border: none;
-    overflow: auto;
 }
 
 .thread-message__footer {
diff --git a/src/frontend/src/features/layouts/components/thread-view/components/thread-message/index.tsx b/src/frontend/src/features/layouts/components/thread-view/components/thread-message/index.tsx
index db89c381..b053d32a 100644
--- a/src/frontend/src/features/layouts/components/thread-view/components/thread-message/index.tsx
+++ b/src/frontend/src/features/layouts/components/thread-view/components/thread-message/index.tsx
@@ -61,11 +61,6 @@ export const ThreadMessage = forwardRef<HTMLElement, ThreadMessageProps>(
                         </div>
                         <div className="thread-message__header-column thread-message__header-column--right flex-row flex-align-center">
                             <div className="thread-message__metadata">
-                                {
-                                    message.attachments.length > 0 && (
-                                        <span className="material-icons">attachment</span>
-                                    )
-                                }
                                 {message.sent_at && (
                                     <p className="thread-message__date">{
                                         new Date(message.sent_at).toLocaleString(i18n.language, {
@@ -77,12 +72,17 @@ export const ThreadMessage = forwardRef<HTMLElement, ThreadMessageProps>(
                                         })
                                     }</p>
                                 )}
-                            </div>
                                 {message.is_draft && (
                                     <Badge>
                                         {t('thread_message.draft')}
                                     </Badge>
                                 )}
+                                {
+                                    message.attachments.length > 0 && (
+                                        <span className="material-icons">attachment</span>
+                                    )
+                                }
+                            </div>
                             <div className="thread-message__header-actions">
                                 {hasSeveralRecipients && (
                                     <Tooltip content={t('actions.reply_all')}>
diff --git a/src/frontend/src/features/layouts/components/thread-view/components/thread-message/message-body.tsx b/src/frontend/src/features/layouts/components/thread-view/components/thread-message/message-body.tsx
index 9648e94c..73f67a3b 100644
--- a/src/frontend/src/features/layouts/components/thread-view/components/thread-message/message-body.tsx
+++ b/src/frontend/src/features/layouts/components/thread-view/components/thread-message/message-body.tsx
@@ -50,14 +50,14 @@ const MessageBody = ({ rawHtmlBody, rawTextBody }: MessageBodyProps) => {
                 <meta http-equiv="Content-Security-Policy" content="${CSP}">
                 <base target="_blank">
                 <style>
-                body {
+                html, body {
                     margin: 0;
+                    padding: 0;
+                }
+                body {
                     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
                     font-size: 14px;
-                    line-height: 1.5;
                     color: #24292e;
-                    overflow-y: hidden;
-                    padding-bottom: 1rem;
                 }
                 img { max-width: 100%; height: auto; }
                 a { color: #0366d6; text-decoration: none; }
@@ -89,7 +89,7 @@ const MessageBody = ({ rawHtmlBody, rawTextBody }: MessageBodyProps) => {
 
     const resizeIframe = useCallback(() => {
         if (iframeRef.current?.contentWindow) {
-          const height = iframeRef.current.contentWindow.document.body.getBoundingClientRect().height;
+          const height = iframeRef.current.contentWindow.document.documentElement.getBoundingClientRect().height;
           iframeRef.current.style.height = `${height}px`;
         }
       }, [iframeRef]);
@@ -110,4 +110,4 @@ const MessageBody = ({ rawHtmlBody, rawTextBody }: MessageBodyProps) => {
     )
 }
 
-export default MessageBody;
\ No newline at end of file
+export default MessageBody;
diff --git a/src/frontend/src/pages/_app.tsx b/src/frontend/src/pages/_app.tsx
index bd903b69..84d4d8ed 100644
--- a/src/frontend/src/pages/_app.tsx
+++ b/src/frontend/src/pages/_app.tsx
@@ -64,7 +64,9 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   return (
     <>
       <Head>
-      <title>{t("app_title")}</title>
+        <title>{t("app_title")}</title>
+        <meta name="description" content={t("app_description")} />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         <link rel="icon" href="/images/favicon-light.svg" type="image/svg+xml" />
         <link
           rel="icon"
diff --git a/src/frontend/src/pages/index.tsx b/src/frontend/src/pages/index.tsx
index 9ffc46dd..7dc0a7da 100644
--- a/src/frontend/src/pages/index.tsx
+++ b/src/frontend/src/pages/index.tsx
@@ -1,5 +1,4 @@
 import { GlobalLayout } from "@/features/layouts/components/global/global-layout";
-import Head from "next/head";
 import { useTranslation } from "react-i18next";
 import { Hero, HomeGutter, Footer, ProConnectButton } from "@gouvfr-lasuite/ui-kit";
 import { login, useAuth } from "@/features/auth";
@@ -20,12 +19,6 @@ export default function HomePage() {
 
   return (
     <div className="app__home">
-      <Head>
-        <title>{t("app_title")}</title>
-        <meta name="description" content={t("app_description")} />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.png" />
-      </Head>
       <HomeGutter>
         <Hero
           logo={<img src="/images/app-icon.svg" alt="Messages Logo" width={64} />}
diff --git a/src/frontend/src/pages/mailbox/_index.scss b/src/frontend/src/pages/mailbox/_index.scss
index f2f8f881..20bdadd1 100644
--- a/src/frontend/src/pages/mailbox/_index.scss
+++ b/src/frontend/src/pages/mailbox/_index.scss
@@ -6,10 +6,10 @@
 
 .thread-list-panel {
     flex: 1;
-    min-width: 280px;
+    min-width: min(280px, 100vw);
 }
 
 .thread__resize-handle {
     background: var(--c--theme--colors--greyscale-200);
     width: 1px;
-}
\ No newline at end of file
+}