styling fixes

packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx

@@ -76,7 +76,7 @@ export default function InferenceJobsList({
         <div className="d-flex flex-column p-4 gap-3 text-center align-items-center">
           <FontAwesomeIcon icon={faClipboardList} className="display-6 mb-2" />
           <div>
-            <h2 className="fw-semibold mb-1">{t("core.noJobsTitle")}</h2>
+            <h4 className="fw-semibold mb-1">{t("core.noJobsTitle")}</h4>
             <p className="opacity-75 mb-2">{t("core.noJobsSubtitle")}</p>
           </div>
 

packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx

@@ -20,7 +20,7 @@ import {
   faWandMagicSparkles,
   faWaveformLines,
   faTransporter,
-  faClipboardList
+  faClipboardList,
 } from "@fortawesome/pro-solid-svg-icons";
 
 import {
@@ -538,7 +538,7 @@ export default function SideNav({
         <div className="mobile-fixed-bottom">
           <div className="d-none d-lg-block">
             <div className="sidebar-heading">Jobs Queue</div>
-            <div className="ps-4 mb-3">
+            <div className="d-flex flex-column ps-4 mb-1">
               <div>
                 {t("queueTts")}:{" "}
                 <span className="text-red">{ttsQueuedCount}</span>

packages/fakeyou.com/src/scss/nav.scss

@@ -117,7 +117,7 @@ $topbar-height: 66px;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
   opacity: 0.5;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .sidebar-heading-icon {
@@ -195,7 +195,9 @@ $topbar-height: 66px;
     grid-column: 2;
   }
 
-  .button { white-space: nowrap; }
+  .button {
+    white-space: nowrap;
+  }
 }
 
 .topbar-mobile-search-bar-container {
@@ -234,11 +236,11 @@ $topbar-height: 66px;
 .mobile-fixed-bottom {
   position: sticky;
   bottom: 0;
-  padding: 1.5rem 0rem;
+  padding: 0.75rem 0rem;
   width: 100%;
   background-color: $panel-inner;
   border-top: 1px solid lighten($panel-inner, 5%) !important;
-  font-size: 13px;
+  font-size: 12px;
 }
 
 @media (min-width: 992px) {