From b5d657071e7da61b41094f545873fbf492cd3cb3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 4 Jan 2025 18:53:34 +0200
Subject: [PATCH] feat(mobile): improve about dialog layout

---
 src/public/app/widgets/dialogs/help.ts | 2 +-
 src/public/stylesheets/style.css       | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/public/app/widgets/dialogs/help.ts b/src/public/app/widgets/dialogs/help.ts
index 6947101d3..e3286db65 100644
--- a/src/public/app/widgets/dialogs/help.ts
+++ b/src/public/app/widgets/dialogs/help.ts
@@ -11,7 +11,7 @@ const TPL = `
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('help.close')}"></button>
             </div>
             <div class="modal-body" style="overflow: auto; height: calc(100vh - 70px);">
-                <div class="help-cards row row-cols-3 g-3">
+                <div class="help-cards row row-cols-md-3 g-3">
                     <div class="card">
                         <div class="card-body">
                             <h5 class="card-title">${t('help.noteNavigation')}</h5>
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 89d26b30d..a0edd1a60 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1231,6 +1231,14 @@ body.mobile #launcher-pane .dropdown-menu.show {
         margin: 0 !important;
         max-height: 85vh;
     }
+
+    body.mobile .modal-content {
+        height: 100% !important;
+    }
+
+    body.mobile .help-dialog kbd {
+        display: inline !important;
+    }
 }
 
 /* Mobile, tablet mode */