fix: show fullscreen correctly

src/index.css

@@ -1,15 +1,16 @@
-/* Allow users to select and copy text
-https://allexperts16.blogspot.com/2018/06/allow-users-to-select-and-copy-text-in.html */
-
 .app-background {
   background: var(--background);
   color: var(--color);
 }
 
-.app-fullscreen {
+.ios .app-fullscreen {
   min-height: calc(100% - var(--offset-top));
 }
 
+.md .app-fullscreen {
+  min-height: 100%;
+}
+
 .chapter-card {
   height: 300px;
   max-height: 300px;
@@ -53,6 +54,8 @@ https://allexperts16.blogspot.com/2018/06/allow-users-to-select-and-copy-text-in
   text-align: center;
 }
 
+/* Allow users to select and copy text
+https://allexperts16.blogspot.com/2018/06/allow-users-to-select-and-copy-text-in.html */
 .selectable {
   -webkit-user-select: text;
   -moz-user-select: text;

src/pages/Page.css

@@ -1,3 +1,3 @@
-ion-content ion-toolbar {
-  --background: transparent;
-}
+h1 {
+  margin: 0;
+}

src/pages/Page.tsx

@@ -25,6 +25,7 @@ export const HomePage: React.FC = () => {
           <IonTitle>{t(`APP.NAME`)}</IonTitle>
         </IonToolbar>
       </IonHeader>
+
       <IonContent color="primary" fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar color="primary">

src/pages/Settings/SettingsPage.tsx

@@ -29,12 +29,13 @@ export const SettingsPage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent color="primary" fullscreen={true}>
+      <IonContent color="primary" fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar color="primary">
             <IonTitle size="large">{t('SETTINGS.TITLE')}</IonTitle>
           </IonToolbar>
         </IonHeader>
+
         <div className="app-background app-fullscreen">
           <IonList>
             <SettingsLanguageItems />