From 89ab30f4e7e1af1f36930dd74601510b22d74f30 Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Sun, 5 Nov 2023 16:32:11 +1300
Subject: [PATCH 1/7] Tidy up User Menu

---
 semantic/src/site/globals/site.overrides | 35 +++++++++++++++++-------
 src/containers/User/UserArea.tsx         | 16 ++++++++++-
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides
index 7cebe61cb..188cb6d23 100644
--- a/semantic/src/site/globals/site.overrides
+++ b/semantic/src/site/globals/site.overrides
@@ -325,6 +325,9 @@ a:hover {
     padding-top: 8px;
     padding-bottom: 8px;
   }
+  @media only screen and (max-width: 860px) {
+    display: none;
+  }
 }
 
 #user-area-left {
@@ -347,11 +350,31 @@ a:hover {
 }
 
 #user-menu {
-  width: clamp(150px, 20%, 300px);
   text-align: right;
+  .button {
+    margin-top: 10px;
+    border-radius: 20px;
+    background-color: @surfacesWhite;
+    color: @darkGrey;
+    min-width: 120px;
+    max-width: 300px;
+  }
+  .ui .dropdown {
+    display: flex;
+  }
+  .ui.dropdown > .text {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+  .ui.dropdown .menu {
+    right: 0;
+    left: unset;
+  }
 }
 
-// Not currently used, but should be appplied to the Link in the menu
+// Not currently used, but should be applied to the Link in the menu
 // bar that reflects the current page
 .selected-link {
   font-weight: bold;
@@ -380,14 +403,6 @@ a:hover {
   max-width: 300px;
 }
 
-#user-menu .button {
-  margin-top: 10px;
-  border-radius: 20px;
-  background-color: @surfacesWhite;
-  color: @darkGrey;
-  min-width: 120px;
-}
-
 #language-modal {
   display: flex;
   flex-direction: column;
diff --git a/src/containers/User/UserArea.tsx b/src/containers/User/UserArea.tsx
index 3ca6c47c6..b785afb33 100644
--- a/src/containers/User/UserArea.tsx
+++ b/src/containers/User/UserArea.tsx
@@ -490,7 +490,21 @@ const UserMenu: React.FC<{ user: User; templates: TemplateInList[] }> = ({ user,
           <Button>
             <Button.Content visible>
               <Dropdown
-                text={`${selectedLanguage?.flag} ${user?.firstName || ''} ${user?.lastName || ''}`}
+                // text={`${selectedLanguage?.flag} ${user?.firstName || ''} ${user?.lastName || ''}`}
+                text={
+                  (
+                    <div
+                      style={{ overflow: 'hidden', textOverflow: 'ellipsis', lineHeight: '1.2em' }}
+                    >
+                      <span style={{ fontSize: '150%', marginRight: 5 }}>
+                        {selectedLanguage?.flag}
+                      </span>
+                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{`${
+                        user?.firstName || ''
+                      } ${user?.lastName || ''}`}</span>
+                    </div>
+                  ) as any
+                }
               >
                 {CommonMenu}
               </Dropdown>

From 31e340199dc8253573a117d988ac2c8817ef68d2 Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Mon, 6 Nov 2023 08:36:30 +1300
Subject: [PATCH 2/7] Mobile header

---
 semantic/src/site/globals/site.overrides | 16 +++++++++++-----
 semantic/src/site/globals/site.variables |  2 +-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides
index 188cb6d23..d3588a58c 100644
--- a/semantic/src/site/globals/site.overrides
+++ b/semantic/src/site/globals/site.overrides
@@ -307,10 +307,6 @@ a:hover {
   min-width: @minimumContainerWidth;
 }
 
-#user-area.ui.container {
-  padding-right: 60px;
-}
-
 #brand-area {
   min-width: 100px;
   max-width: 200px;
@@ -2616,7 +2612,7 @@ h6:first-child {
     .list {
       display: flex;
       align-items: start;
-      gap: 10px;
+      gap: 20px;
     }
     .ui .dropdown {
       display: flex;
@@ -2645,6 +2641,16 @@ h6:first-child {
     height: @mobileHeaderHeight;
   }
 
+  #user-area-left {
+    max-width: 100%;
+    padding-right: 20px;
+    #org-selector {
+      font-size: 85%;
+      letter-spacing: unset;
+      line-height: 1.2em;
+    }
+  }
+
   #menu-bar {
     font-size: inherit;
     .list {
diff --git a/semantic/src/site/globals/site.variables b/semantic/src/site/globals/site.variables
index ebe81cb60..75c7ffc21 100644
--- a/semantic/src/site/globals/site.variables
+++ b/semantic/src/site/globals/site.variables
@@ -165,7 +165,7 @@
 -------------------------*/
 
 @headerHeight: 100px;
-@mobileHeaderHeight: 80px;
+@mobileHeaderHeight: 60px;
 @footerHeight: 75px;
 @borderRadius: 8px;
 

From 48bbd7a4c5e1c48f53f44ef299394020723d57c4 Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Mon, 6 Nov 2023 08:43:32 +1300
Subject: [PATCH 3/7] Better layout of Menu bar and other contents

---
 semantic/src/site/globals/site.overrides | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides
index d3588a58c..d7c1f6136 100644
--- a/semantic/src/site/globals/site.overrides
+++ b/semantic/src/site/globals/site.overrides
@@ -330,6 +330,7 @@ a:hover {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  justify-content: flex-end;
 }
 
 // Menu bar links
@@ -347,6 +348,8 @@ a:hover {
 
 #user-menu {
   text-align: right;
+  display: flex;
+  align-items: center;
   .button {
     margin-top: 10px;
     border-radius: 20px;
@@ -2609,6 +2612,8 @@ h6:first-child {
   }
   #menu-bar {
     font-size: inherit;
+    position: absolute;
+    top: 5px;
     .list {
       display: flex;
       align-items: start;

From be7704444a5f86ee30b6517a696378debd5a921a Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Mon, 6 Nov 2023 08:49:57 +1300
Subject: [PATCH 4/7] Tweak mobile sizes

---
 semantic/src/site/globals/site.overrides | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides
index d7c1f6136..c052f6286 100644
--- a/semantic/src/site/globals/site.overrides
+++ b/semantic/src/site/globals/site.overrides
@@ -2644,15 +2644,19 @@ h6:first-child {
 
   #user-area {
     height: @mobileHeaderHeight;
+    padding-left: 10px;
   }
 
   #user-area-left {
     max-width: 100%;
-    padding-right: 20px;
+    padding-right: 25px;
     #org-selector {
-      font-size: 85%;
+      font-size: 100%;
       letter-spacing: unset;
-      line-height: 1.2em;
+      line-height: 1.3em;
+    }
+    #org-selector .image {
+      margin-right: 10px;
     }
   }
 

From 73c3722887e37ea29d2dc2fb96aee8a4fde05490 Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Mon, 6 Nov 2023 08:52:43 +1300
Subject: [PATCH 5/7] Org name width limit

---
 semantic/src/site/globals/site.overrides | 3 +++
 src/containers/User/UserArea.tsx         | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides
index c052f6286..4d30ee831 100644
--- a/semantic/src/site/globals/site.overrides
+++ b/semantic/src/site/globals/site.overrides
@@ -2654,6 +2654,9 @@ h6:first-child {
       font-size: 100%;
       letter-spacing: unset;
       line-height: 1.3em;
+      #org-label {
+        max-width: 700px;
+      }
     }
     #org-selector .image {
       margin-right: 10px;
diff --git a/src/containers/User/UserArea.tsx b/src/containers/User/UserArea.tsx
index b785afb33..8673e1366 100644
--- a/src/containers/User/UserArea.tsx
+++ b/src/containers/User/UserArea.tsx
@@ -417,7 +417,7 @@ const OrgSelector: React.FC<{ user: User; orgs: OrganisationSimple[]; onLogin: F
       {user?.organisation?.logoUrl && (
         <Image src={getFullUrl(user?.organisation?.logoUrl, getServerUrl('public'))} />
       )}
-      <div>
+      <div id="org-label">
         {dropdownOptions.length === 1 ? (
           user?.organisation?.orgName || t('LABEL_NO_ORG')
         ) : (

From f703fc023b347c6ae2c397945e5387a2a9b8db06 Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Mon, 6 Nov 2023 09:01:48 +1300
Subject: [PATCH 6/7] Remove comment

---
 src/containers/User/UserArea.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/containers/User/UserArea.tsx b/src/containers/User/UserArea.tsx
index 8673e1366..29c709866 100644
--- a/src/containers/User/UserArea.tsx
+++ b/src/containers/User/UserArea.tsx
@@ -490,7 +490,6 @@ const UserMenu: React.FC<{ user: User; templates: TemplateInList[] }> = ({ user,
           <Button>
             <Button.Content visible>
               <Dropdown
-                // text={`${selectedLanguage?.flag} ${user?.firstName || ''} ${user?.lastName || ''}`}
                 text={
                   (
                     <div

From 5e04d5bd8a084e5866065c5336ebafee5bae979e Mon Sep 17 00:00:00 2001
From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date: Mon, 6 Nov 2023 11:12:40 +1300
Subject: [PATCH 7/7] Limit image width in mobile

---
 semantic/src/site/globals/site.overrides | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides
index 4d30ee831..580ac34a0 100644
--- a/semantic/src/site/globals/site.overrides
+++ b/semantic/src/site/globals/site.overrides
@@ -2660,6 +2660,8 @@ h6:first-child {
     }
     #org-selector .image {
       margin-right: 10px;
+      max-width: 100px;
+      height: auto;
     }
   }