Fix dynamic header font breaking layout (#772)

aeharding · Oct 13, 2023 · b55ed4e · b55ed4e
1 parent c3e7919
commit b55ed4e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/GlobalStyles.tsx b/src/GlobalStyles.tsx
@@ -47,10 +47,6 @@ export default function GlobalStyles({ children }: GlobalStylesProps) {
         styles={css`
           html {
             ${baseFontStyles}
-
-            ion-content ion-item {
-              font-size: 1rem;
-            }
           }
 
           ${baseVariables}

diff --git a/src/index.css b/src/index.css
@@ -17,6 +17,15 @@ ion-tab-button {
   opacity: 1 !important;
 }
 
+/*
+ * Header doesn't support dynamic font size
+ */
+ion-router-outlet > .ion-page > ion-header ion-button,
+ion-router-outlet > .ion-page > ion-header ion-back-button,
+ion-router-outlet > .ion-page > ion-header ion-title {
+  font-size: 17px;
+}
+
 .left-align-buttons
   .action-sheet-button:not(.action-sheet-cancel)
   .action-sheet-button-inner.sc-ion-action-sheet-ios:not(