Fix localForage infinite loop, set base font-size to 14px, and tweak

styles

ui/v2.5/src/components/Galleries/GalleryList.tsx

@@ -27,7 +27,7 @@ export const GalleryList: React.FC = () => {
           <thead>
             <tr>
               <th>Preview</th>
-              <th>Path</th>
+              <th className="d-none d-sm-none">Path</th>
             </tr>
           </thead>
           <tbody>
@@ -38,6 +38,7 @@ export const GalleryList: React.FC = () => {
                     {gallery.files.length > 0 ? (
                       <img
                         alt={gallery.title ?? ""}
+                        className="w-100 w-sm-auto"
                         src={`${gallery.files[0].path}?thumb=true`}
                       />
                     ) : (
@@ -45,7 +46,7 @@ export const GalleryList: React.FC = () => {
                     )}
                   </Link>
                 </td>
-                <td>
+                <td className="d-none d-sm-block">
                   <Link to={`/galleries/${gallery.id}`}>{gallery.path}</Link>
                 </td>
               </tr>

ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx

@@ -222,7 +222,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
           <div>
             {queryableScrapers
               ? queryableScrapers.map(s => (
-                  <div>
+                  <div key={s.name}>
                     <Button
                       key={s.name}
                       className="minimal"
@@ -390,7 +390,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
           {maybeRenderName()}
           {maybeRenderAliases()}
           {TableUtils.renderInputGroup({
-            title: "Birthdate (YYYY-MM-DD)",
+            title: "Birthdate",
             value: birthdate,
             isEditing: !!isEditing,
             onChange: setBirthdate
@@ -409,7 +409,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
             onChange: setCountry
           })}
           {TableUtils.renderInputGroup({
-            title: "Height (CM)",
+            title: "Height (cm)",
             value: height,
             isEditing: !!isEditing,
             onChange: setHeight

ui/v2.5/src/components/Settings/Settings.tsx

@@ -40,6 +40,7 @@ export const Settings: React.FC = () => {
               <Nav.Item>
                 <Nav.Link eventKey="about">About</Nav.Link>
               </Nav.Item>
+              <hr className="d-sm-none" />
             </Nav>
           </Col>
           <Col sm={10}>

ui/v2.5/src/hooks/LocalForage.ts

@@ -39,10 +39,14 @@ function useLocalForage(
         const serialized = await localForage.getItem<string>(key);
         const parsed = JSON.parse(serialized);
         if (!Object.is(parsed, null)) {
-          setError(null);
           setData(parsed);
           Cache[key] = parsed;
         }
+        else {
+          setData({});
+          Cache[key] = {};
+        }
+        setError(null);
       } catch (err) {
         setError(err);
       } finally {

ui/v2.5/src/index.scss

@@ -13,6 +13,10 @@
 @import "src/components/Tags/styles.scss";
 @import "src/components/Wall/styles.scss";
 
+html {
+  font-size: 14px;
+}
+
 body {
   color: $text-color;
   -webkit-font-smoothing: antialiased;
@@ -284,6 +288,16 @@ code {
 }
 
 .top-nav {
+  padding: .25rem 1rem;
+
+  .nav-link {
+    padding: 0;
+  }
+
+  .btn {
+    white-space: nowrap;
+  }
+
   @media (max-width: 576px) {
     .btn {
       padding: 6px;