From 464ee51de837d675e98d988e86fa045ddd3e46da Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 29 Feb 2024 16:57:47 -0800
Subject: [PATCH] Fix: mobile sizing tweaks

---
 .../app/components/app-frame/app-frame.component.html |  4 ++--
 .../app/components/app-frame/app-frame.component.scss |  8 +++++++-
 src-ui/src/styles.scss                                | 11 +++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index 5f30d54fa..261c033e0 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -13,7 +13,7 @@
         d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z"
         transform="translate(0 0)" />
     </svg>
-    <div class="ms-3 d-inline-block" [class.d-md-none]="slimSidebarEnabled">
+    <div class="ms-2 ms-md-3 d-inline-block" [class.d-md-none]="slimSidebarEnabled">
       @if (customAppTitle?.length) {
         <div class="d-flex flex-column align-items-start">
           <span class="title">{{customAppTitle}}</span>
@@ -27,7 +27,7 @@
   <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1"
     *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
     <form (ngSubmit)="search()" class="form-inline flex-grow-1">
-      <i-bs style="top: .25em;" width="1em" height="1em" name="search"></i-bs>
+      <i-bs width="1em" height="1em" name="search"></i-bs>
       <input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search"
         [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)"
         (selectItem)="itemSelected($event)" i18n-placeholder>
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index b9ac4f7f6..f377276ab 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -262,9 +262,15 @@ main {
     > i-bs {
       position: absolute;
       left: 0.6rem;
-      top: 0.5rem;
+      top: .35rem;
       color: rgba(255, 255, 255, 0.6);
+
+      @media screen and (min-width: 768px) {
+        // adjust for smaller font size on non-mobile
+        top: 0.25rem;
+      }
     }
+
   }
 
 
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index bc1efaf23..5dcf2bf9e 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -320,6 +320,17 @@ textarea,
     background-color: var(--pngx-bg-darker);
     color: var(--bs-body-color);
   }
+
+  @media(max-width: 768px) {
+    font-size: 1rem;
+  }
+}
+
+.input-group .form-control-sm {
+  // accommodate larger font size on mobile
+  padding-top: .15rem;
+  padding-bottom: .15rem;
+  min-height: calc(1.3em + 0.5rem + calc(var(--bs-border-width) * 2)) !important;
 }
 
 .input-group .btn-outline-secondary {