From 657fa9402c4fee9dd1bd463f55358e9671d3246c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 4 Jan 2025 19:26:22 +0200
Subject: [PATCH] feat(mobile): improve layout for settings

---
 .../options/advanced/database_anonymization.js   | 16 ++++++++--------
 .../options/appearance/code_block.js             | 16 ++++++++--------
 .../options/appearance/max_content_width.js      |  8 ++++----
 .../type_widgets/options/appearance/theme.js     | 12 ++++++------
 src/public/stylesheets/style.css                 |  4 ++++
 5 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/advanced/database_anonymization.js b/src/public/app/widgets/type_widgets/options/advanced/database_anonymization.js
index 2f58a61f2..dd59a8b18 100644
--- a/src/public/app/widgets/type_widgets/options/advanced/database_anonymization.js
+++ b/src/public/app/widgets/type_widgets/options/advanced/database_anonymization.js
@@ -6,30 +6,30 @@ import { t } from "../../../../services/i18n.js";
 const TPL = `
 <div class="options-section">
     <h4>${t("database_anonymization.title")}</h4>
-    
+
     <div class="row">
         <p>${t("database_anonymization.choose_anonymization")}</p>
 
-        <div class="col-6">
+        <div class="col-md-6">
             <h5>${t("database_anonymization.full_anonymization")}</h5>
-            
+
             <p>${t("database_anonymization.full_anonymization_description")}</p>
             <button class="anonymize-full-button btn">${t("database_anonymization.save_fully_anonymized_database")}</button>
         </div>
 
-        <div class="col-6">
+        <div class="col-md-6">
             <h5>${t("database_anonymization.light_anonymization")}</h5>
-            
+
             <p>${t("database_anonymization.light_anonymization_description")}</p>
-            
+
             <button class="anonymize-light-button btn">${t("database_anonymization.save_lightly_anonymized_database")}</button>
         </div>
     </div>
-    
+
     <hr />
 
     <h5>${t("database_anonymization.existing_anonymized_databases")}</h5>
-    
+
     <ul class="existing-anonymized-databases"></ul>
 </div>`;
 
diff --git a/src/public/app/widgets/type_widgets/options/appearance/code_block.js b/src/public/app/widgets/type_widgets/options/appearance/code_block.js
index 41a82602d..e619b2e5c 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/code_block.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/code_block.js
@@ -10,7 +10,7 @@ greet(n); // Print "Hello World" for n times
 
 /**
  * Displays a "Hello World!" message for a given amount of times, on the standard console. The "Hello World!" text will be displayed once per line.
- * 
+ *
  * @param {number} times    The number of times to print the \`Hello World!\` message.
  */
 function greet(times) {
@@ -27,12 +27,12 @@ const TPL = `
     <p>${t("highlighting.description")}</p>
 
     <div class="form-group row">
-        <div class="col-6">
+        <div class="col-md-6">
             <label for="highlighting-color-scheme-select">${t("highlighting.color-scheme")}</label>
             <select id="highlighting-color-scheme-select" class="theme-select form-select"></select>
         </div>
 
-        <div class="col-6 side-checkbox">
+        <div class="col-md-6 side-checkbox">
             <label class="form-check">
                 <input type="checkbox" class="word-wrap form-check-input" />
                 ${t("code_block.word_wrapping")}
@@ -58,20 +58,20 @@ const TPL = `
  * Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter.
  */
 export default class CodeBlockOptions extends OptionsWidget {
-    doRender() {        
-        this.$widget = $(TPL);        
+    doRender() {
+        this.$widget = $(TPL);
         this.$themeSelect = this.$widget.find(".theme-select");
         this.$themeSelect.on("change", async () => {
             const newTheme = this.$themeSelect.val();
             library_loader.loadHighlightingTheme(newTheme);
             await server.put(`options/codeBlockTheme/${newTheme}`);
         });
-        
+
         this.$wordWrap = this.$widget.find("input.word-wrap");
         this.$wordWrap.on("change", () => this.updateCheckboxOption("codeBlockWordWrap", this.$wordWrap));
 
         // Set up preview
-        this.$sampleEl = this.$widget.find(".code-sample");        
+        this.$sampleEl = this.$widget.find(".code-sample");
     }
 
     #setupPreview(shouldEnableSyntaxHighlight) {
@@ -116,4 +116,4 @@ export default class CodeBlockOptions extends OptionsWidget {
 
         this.#setupPreview(options.codeBlockTheme !== "none");
     }
-}
\ No newline at end of file
+}
diff --git a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
index c152f5d56..ee6d0f631 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
@@ -7,16 +7,16 @@ const MIN_VALUE = 640;
 const TPL = `
 <div class="options-section">
     <h4>${t("max_content_width.title")}</h4>
-    
+
     <p>${t("max_content_width.default_description")}</p>
-    
+
     <div class="form-group row">
-        <div class="col-6">
+        <div class="col-md-6">
             <label for="max-content-width">${t("max_content_width.max_width_label")}</label>
             <input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
         </div>
     </div>
-    
+
     <p>
         ${t("max_content_width.apply_changes_description")}
         <button class="btn btn-micro reload-frontend-button">${t("max_content_width.reload_button")}</button>
diff --git a/src/public/app/widgets/type_widgets/options/appearance/theme.js b/src/public/app/widgets/type_widgets/options/appearance/theme.js
index 75cf1cbe5..730fcad97 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/theme.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/theme.js
@@ -26,22 +26,22 @@ const TPL = `
     </div>
 </div>
 
-<div class="options-section">    
+<div class="options-section">
     <h4>${t("theme.title")}</h4>
-    
+
     <div class="form-group row">
-        <div class="col-6">
+        <div class="col-md-6">
             <label for="theme-select">${t("theme.theme_label")}</label>
             <select id="theme-select" class="theme-select form-select"></select>
         </div>
-        
-        <div class="col-6 side-checkbox">
+
+        <div class="col-md-6 side-checkbox">
             <label class="form-check">
                 <input type="checkbox" class="override-theme-fonts form-check-input">
                 ${t("theme.override_theme_fonts_label")}
             </label>
         </div>
-    </div>    
+    </div>
 </div>`;
 
 export default class ThemeOptions extends OptionsWidget {
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index a0edd1a60..122cd816d 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1239,6 +1239,10 @@ body.mobile #launcher-pane .dropdown-menu.show {
     body.mobile .help-dialog kbd {
         display: inline !important;
     }
+
+    body.mobile .options-section table {
+        word-break: break-all;
+    }
 }
 
 /* Mobile, tablet mode */