From 648ee34171adaf6fb217c38a725a28e6eefcbe02 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 3 Sep 2021 11:36:53 +0200
Subject: [PATCH] Style improvements for smaller screens

---
 src/pagesView/components/Header/Filter.tsx   |  2 +-
 src/pagesView/components/Header/Folders.tsx  |  2 +-
 src/pagesView/components/Header/Grouping.tsx |  2 +-
 src/pagesView/components/Header/Header.tsx   | 18 +++++++++++-------
 src/pagesView/components/Header/Sorting.tsx  |  2 +-
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/pagesView/components/Header/Filter.tsx b/src/pagesView/components/Header/Filter.tsx
index edbc5eba..ab4d2268 100644
--- a/src/pagesView/components/Header/Filter.tsx
+++ b/src/pagesView/components/Header/Filter.tsx
@@ -18,7 +18,7 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({label, activeItem
   }
 
   return (
-    <div className="flex items-center ml-6">
+    <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={label} title={activeItem || DEFAULT_VALUE} />
 
diff --git a/src/pagesView/components/Header/Folders.tsx b/src/pagesView/components/Header/Folders.tsx
index e9e85d68..05d25f97 100644
--- a/src/pagesView/components/Header/Folders.tsx
+++ b/src/pagesView/components/Header/Folders.tsx
@@ -16,7 +16,7 @@ export const Folders: React.FunctionComponent<IFoldersProps> = ({folders, crntFo
   }
   
   return (
-    <div className="flex items-center ml-6">
+    <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Showing`} title={crntFolder || DEFAULT_TYPE} />
 
diff --git a/src/pagesView/components/Header/Grouping.tsx b/src/pagesView/components/Header/Grouping.tsx
index 15e4a39d..aae455f6 100644
--- a/src/pagesView/components/Header/Grouping.tsx
+++ b/src/pagesView/components/Header/Grouping.tsx
@@ -18,7 +18,7 @@ export const Grouping: React.FunctionComponent<IGroupingProps> = ({group, switch
   const crntGroup = groupOptions.find(x => x.id === group);
 
   return (
-    <div className="flex items-center ml-6">
+    <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Group by`} title={crntGroup?.name || ""} />
 
diff --git a/src/pagesView/components/Header/Header.tsx b/src/pagesView/components/Header/Header.tsx
index b1fecfe3..f9e4abdb 100644
--- a/src/pagesView/components/Header/Header.tsx
+++ b/src/pagesView/components/Header/Header.tsx
@@ -65,18 +65,22 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({currentTab, curre
         </div>
       </div>
 
-      <div className="px-4 flex items-center border-b border-gray-200 dark:border-whisper-600">
-        <Navigation currentTab={currentTab} totalPages={totalPages} switchTab={switchTab} />
+      <div className="px-4 flex flex-col lg:flex-row items-center border-b border-gray-200 dark:border-whisper-600">
+        <div className={`w-full`}>
+          <Navigation currentTab={currentTab} totalPages={totalPages} switchTab={switchTab} />
+        </div>
 
-        <Folders crntFolder={crntFolder} folders={folders} switchFolder={switchFolder} />
+        <div className={`my-4 lg:my-0 w-full flex items-center justify-between order-first lg:order-last `}>
+          <Folders crntFolder={crntFolder} folders={folders} switchFolder={switchFolder} />
 
-        <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={switchTag} />
+          <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={switchTag} />
 
-        <Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={switchCategory} />
+          <Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={switchCategory} />
 
-        <Grouping group={crntGroup} switchGroup={switchGroup} />
+          <Grouping group={crntGroup} switchGroup={switchGroup} />
 
-        <Sorting currentSorting={currentSorting} switchSorting={switchSorting} />
+          <Sorting currentSorting={currentSorting} switchSorting={switchSorting} />
+        </div>
       </div>
     </div>
   );
diff --git a/src/pagesView/components/Header/Sorting.tsx b/src/pagesView/components/Header/Sorting.tsx
index 9322dc44..000c8e9f 100644
--- a/src/pagesView/components/Header/Sorting.tsx
+++ b/src/pagesView/components/Header/Sorting.tsx
@@ -20,7 +20,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({currentSorting,
   const crntSort = sortOptions.find(x => x.id === currentSorting);
 
   return (
-    <div className="flex items-center ml-6">
+    <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Sort by`} title={crntSort?.name || ""} />