Merge branch 'MAILWEB-6608-toolbar-arrow' into 'main'

Make the toolbar take the full available width to show navigation

See merge request web/clients!16845

Author: MargeBot

applications/mail/src/app/components/toolbar/Toolbar.tsx

@@ -91,7 +91,6 @@ const Toolbar = (props: Props) => {
         case 'rowWide':
             return <ToolbarRowWide {...commonProps} />;
         default:
-            // columnWide
             return <ToolbarColumnWide {...commonProps} />;
     }
 };

applications/mail/src/app/components/toolbar/ToolbarColumnWide.tsx

@@ -69,7 +69,7 @@ const ToolbarColumnWide = ({
     const pageSize = useMailSelector(pageSizeSelector);
 
     return (
-        <div>
+        <div className="w-full">
             <nav
                 className={clsx(
                     classname,

applications/mail/src/app/components/toolbar/ToolbarHeaderMessageWide.tsx

@@ -62,7 +62,7 @@ const ToolbarHeaderMessageWide = ({
     const { localIsTiny } = getToolbarResponsiveSizes(breakpoint);
 
     return (
-        <div>
+        <div className="w-full">
             <nav
                 className={clsx(classname, 'toolbar--in-container')}
                 data-shortcut-target="mailbox-toolbar"

applications/mail/src/app/components/toolbar/ToolbarNarrow.tsx

@@ -36,7 +36,7 @@ const ToolbarNarrow = ({
     const breakpoint = useElementBreakpoints(toolbarRef, BREAKPOINTS);
 
     return (
-        <div>
+        <div className="w-full">
             <nav
                 className={clsx(classname, 'justify-space-between py-1 pl-3 pr-2')}
                 data-shortcut-target="mailbox-toolbar"

applications/mail/src/app/components/toolbar/ToolbarRowWide.tsx

@@ -71,7 +71,7 @@ const ToolbarRowWide = ({
     const pageSize = useMailSelector(pageSizeSelector);
 
     return (
-        <div>
+        <div className="w-full">
             <nav
                 className={clsx(classname, 'justify-space-between py-1 pl-4 pr-2')}
                 data-shortcut-target="mailbox-toolbar"