Fix small visual details in game page

Heroic-Games-Launcher · Nov 26, 2023 · fb54abe · fb54abe
1 parent 26e9e15
commit fb54abe
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/frontend/screens/Game/GamePage/components/HLTB.tsx b/src/frontend/screens/Game/GamePage/components/HLTB.tsx
@@ -27,7 +27,7 @@ const HLTB = () => {
           title={t('info.clickToOpen', 'Click to open')}
         >
           <Speed />
-          {t('howLongToBeat', 'How Long To Beat')}
+          <b>{t('howLongToBeat', 'How Long To Beat')}</b>
         </div>
       }
     >

diff --git a/src/frontend/screens/Game/GamePage/index.scss b/src/frontend/screens/Game/GamePage/index.scss
@@ -241,10 +241,7 @@
         transition: color 300ms;
         display: flex;
         align-items: center;
-
-        svg {
-          margin-inline-end: var(--space-3xs);
-        }
+        gap: 0.3rem;
       }
     }
 
@@ -475,6 +472,10 @@
       text-align: left;
     }
 
+    & > .popover-wrapper {
+      z-index: 3;
+    }
+
     &::after {
       content: '';
       display: block;
@@ -603,7 +604,8 @@
 
       &.infoTab,
       &.extraTab {
-        & > div > * {
+        & > div > *,
+        & > div > .popover-wrapper > * {
           display: flex;
           text-align: end;
           font-size: 16px;
@@ -640,6 +642,12 @@
             background: var(--body-background);
           }
         }
+        .popover-wrapper {
+          overflow: visible;
+          .popover {
+            height: auto;
+          }
+        }
       }
     }