💄(front) make new message form scrollable

When the message form height overflows, it should be scrollable.

Author: jbpenrath

src/frontend/src/features/layouts/components/thread-view/components/thread-labels-widget/index.tsx

@@ -13,7 +13,8 @@ type ThreadLabelsWidgetProps = {
 
 export const ThreadLabelsWidget = ({ threadId, selectedLabels = [] }: ThreadLabelsWidgetProps) => {
     const { t } = useTranslation();
-    const {data: labelsList, isLoading: isLoadingLabelsList } = useLabelsList();
+    const { selectedMailbox } = useMailboxContext();
+    const {data: labelsList, isLoading: isLoadingLabelsList } = useLabelsList({ mailbox_id: selectedMailbox!.id });
     const [isPopupOpen, setIsPopupOpen] = useState(false);
 
     if (isLoadingLabelsList) {

src/frontend/src/pages/mailbox/[mailboxId]/new/_index.scss

@@ -1,10 +1,18 @@
 @use "../../../../styles/utils" as *;
 
+.new-message-form {
+    padding: var(--c--theme--spacings--base);
+    max-height: 100%;
+    width: 100%;
+    overflow-y: auto;
+}
+
 .new-message-form-container {
-    margin-block: auto;
     margin-inline: auto;
+    margin-bottom: var(--c--theme--spacings--4xl);
+    height: 100%;
+    width: 100%;
     max-width: breakpoint("mobile");
-    padding: var(--c--theme--spacings--base);
 }
 
 .new-message-form-container h1 {

src/frontend/src/pages/mailbox/[mailboxId]/new/index.tsx

@@ -35,13 +35,15 @@ const NewMessageFormPage = () => {
     }
 
     return (
-        <div className="new-message-form-container">
-            <h1>{t("new_message_form.title")}</h1>
-            <MessageForm
-                showSubject={true}
-                onSuccess={handleClose}
-                onClose={handleClose}
-            />
+        <div className="new-message-form">
+            <div className="new-message-form-container">
+                <h1>{t("new_message_form.title")}</h1>
+                <MessageForm
+                    showSubject={true}
+                    onSuccess={handleClose}
+                    onClose={handleClose}
+                />
+            </div>
         </div>
     );
 };