From 0df541c80042c6915bb17e95d01376130eec6d98 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 1 Mar 2024 11:55:59 +0100
Subject: [PATCH] fix: messaging page container header mobile view

---
 src/lib/components/drop.svelte                |  2 +
 src/lib/components/dropList.svelte            | 12 ++++-
 src/lib/components/filters/filters.svelte     |  3 +-
 src/lib/components/searchQuery.svelte         |  3 +-
 src/lib/components/viewSelector.svelte        |  8 +++-
 .../project-[project]/messaging/+page.svelte  | 47 +++++++++----------
 6 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index f61ff6a24..a1c222e08 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -12,6 +12,7 @@
     export let childStart = false;
     export let noStyle = false;
     export let fullWidth = false;
+    export let wrapperFullWidth = false;
     export let fixed = false;
     export let display = 'block';
 
@@ -104,6 +105,7 @@
 <div
     class:drop-wrapper={!noStyle}
     class:u-cross-child-start={childStart}
+    class:u-width-full-line={wrapperFullWidth}
     bind:this={element}
     style:display>
     <slot />
diff --git a/src/lib/components/dropList.svelte b/src/lib/components/dropList.svelte
index dd8271f1d..c6ad97dd1 100644
--- a/src/lib/components/dropList.svelte
+++ b/src/lib/components/dropList.svelte
@@ -11,10 +11,20 @@
     export let noStyle = false;
     export let width: string = null;
     export let fullWidth = false;
+    export let wrapperFullWidth = false;
     export let position: 'relative' | 'static' = 'relative';
 </script>
 
-<Drop bind:show {placement} {childStart} {noArrow} {noStyle} {fullWidth} {fixed} on:blur>
+<Drop
+    bind:show
+    {placement}
+    {childStart}
+    {noArrow}
+    {noStyle}
+    {fullWidth}
+    {wrapperFullWidth}
+    {fixed}
+    on:blur>
     <slot />
     <svelte:fragment slot="list">
         <div
diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index cd2f8bfd9..c82b161e5 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -9,6 +9,7 @@
 
     export let query = '[]';
     export let columns: Writable<Column[]>;
+    export let fullWidthMobile = false;
 
     const parsedQueries = queryParamToMap(query);
     queries.set(parsedQueries);
@@ -55,7 +56,7 @@
 </div>
 
 <div class="is-only-mobile">
-    <Button secondary on:click={() => (showFiltersMobile = !showFiltersMobile)}>
+    <Button secondary on:click={() => (showFiltersMobile = !showFiltersMobile)} {fullWidthMobile}>
         <i class="icon-filter u-opacity-50" />
         Filters
         {#if applied > 0}
diff --git a/src/lib/components/searchQuery.svelte b/src/lib/components/searchQuery.svelte
index c77eb214e..53b89218a 100644
--- a/src/lib/components/searchQuery.svelte
+++ b/src/lib/components/searchQuery.svelte
@@ -12,6 +12,7 @@
     export let disabled = false;
     export let autofocus = false;
     export let isWithEndButton = true;
+    export let fullWidth = false;
 
     let element: HTMLInputElement;
     let timer: ReturnType<typeof setTimeout>;
@@ -58,7 +59,7 @@
 </script>
 
 <div class="u-flex u-gap-12 common-section u-main-space-between">
-    <div class="u-flex-basis-50-percent">
+    <div class={fullWidth ? 'u-width-full-line' : 'u-flex-basis-50-percent'}>
         <div class="input-text-wrapper" class:is-with-end-button={isWithEndButton}>
             <input
                 {placeholder}
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 0ece86889..d7ceba36b 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -16,6 +16,7 @@
     export let hideColumns = false;
     export let allowNoColumns = false;
     export let showColsTextMobile = false;
+    export let fullWidthMobile = false;
 
     let showSelectColumns = false;
 
@@ -71,8 +72,11 @@
 <div class="grid-header-col-4">
     {#if !hideColumns && view === View.Table}
         {#if $columns?.length}
-            <DropList bind:show={showSelectColumns} scrollable>
-                <Button secondary on:click={() => (showSelectColumns = !showSelectColumns)}>
+            <DropList bind:show={showSelectColumns} scrollable wrapperFullWidth={fullWidthMobile}>
+                <Button
+                    secondary
+                    on:click={() => (showSelectColumns = !showSelectColumns)}
+                    {fullWidthMobile}>
                     <span
                         class="icon-view-boards u-opacity-50"
                         aria-hidden="true"
diff --git a/src/routes/console/project-[project]/messaging/+page.svelte b/src/routes/console/project-[project]/messaging/+page.svelte
index e27bd3f07..0f559477f 100644
--- a/src/routes/console/project-[project]/messaging/+page.svelte
+++ b/src/routes/console/project-[project]/messaging/+page.svelte
@@ -27,7 +27,7 @@
         TableScroll
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container } from '$lib/layout';
+    import { Container, ContainerHeader } from '$lib/layout';
     import { MessagingProviderType } from '@appwrite.io/console';
     import type { PageData } from './$types';
     import CreateMessageDropdown from './createMessageDropdown.svelte';
@@ -47,7 +47,6 @@
     let deleting = false;
     let showFailed = false;
     let errors: string[] = [];
-    let showCreateDropdownMobile = false;
     let showCreateDropdownDesktop = false;
     let showCreateDropdownEmpty = false;
 
@@ -82,46 +81,42 @@
 </script>
 
 <Container>
-    <div class="u-flex u-flex-vertical">
-        <div class="u-flex u-main-space-between">
-            <Heading tag="h2" size="5">Messages</Heading>
-            <div class="is-only-mobile">
-                <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
-            </div>
-        </div>
-        <!-- TODO: fix width of search input in mobile -->
+    <ContainerHeader title="Messages">
+        <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
+    </ContainerHeader>
+    <div class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-16">
         <SearchQuery
+            fullWidth
             search={data.search}
             placeholder="Search by message ID, description, type, or status">
-            <div class="u-flex u-gap-16 is-not-mobile">
-                <!-- TODO: make this not database-specific -->
-                <Filters query={data.query} {columns} />
-                <ViewSelector
-                    view={data.view}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
+            <div class="is-not-mobile u-width-full-line">
+                <div class="u-flex u-gap-16 u-main-end">
+                    <!-- TODO: make this not database-specific -->
+                    <Filters query={data.query} {columns} />
+                    <ViewSelector
+                        view={data.view}
+                        {columns}
+                        hideView
+                        allowNoColumns
+                        showColsTextMobile />
+                </div>
             </div>
         </SearchQuery>
-        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
+        <div class="is-only-mobile u-flex u-gap-16">
             <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
                 <ViewSelector
                     view={data.view}
                     {columns}
                     hideView
                     allowNoColumns
-                    showColsTextMobile />
+                    showColsTextMobile
+                    fullWidthMobile />
             </div>
             <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <Filters query={data.query} {columns} />
+                <Filters query={data.query} {columns} fullWidthMobile />
             </div>
         </div>
     </div>
-
     {#if data.messages.total}
         <TableScroll>
             <TableHeader>