From 240ee2b6ac874e3fc1a35903533fe9a23c6393e7 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sat, 8 Mar 2025 05:34:43 +0200
Subject: [PATCH] style(next)/options: improve the layout of the option cards

---
 .../app/widgets/type_widgets/options/etapi.ts |  2 +-
 .../stylesheets/theme-next/settings.css       | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/public/app/widgets/type_widgets/options/etapi.ts b/src/public/app/widgets/type_widgets/options/etapi.ts
index becf630eb..747ca39f4 100644
--- a/src/public/app/widgets/type_widgets/options/etapi.ts
+++ b/src/public/app/widgets/type_widgets/options/etapi.ts
@@ -6,7 +6,7 @@ import server from "../../../services/server.js";
 import toastService from "../../../services/toast.js";
 
 const TPL = `
-<div class="options-section">
+<div class="etapi-options-section options-section">
     <h4>${t("etapi.title")}</h4>
 
     <p class="form-text">${t("etapi.description")} <br/>
diff --git a/src/public/stylesheets/theme-next/settings.css b/src/public/stylesheets/theme-next/settings.css
index b64e098de..ddbf5c432 100644
--- a/src/public/stylesheets/theme-next/settings.css
+++ b/src/public/stylesheets/theme-next/settings.css
@@ -2,12 +2,26 @@
  * Settings
  */
 :root {
+    --options-card-max-width: 900px;
     --options-card-padding: 17px;
     --options-title-font-size: 1rem;
     --options-title-offset: 13px;
 }
 
+/* Create a gap at the bottom of option pages */
+.note-detail-content-widget-content.options::after {
+    display: block;
+    content: "";
+    height: 1em;
+}
+
+.note-detail-content-widget-content.options:has(.shortcuts-options-section)::after {
+    height: 0;
+}
+
 .options-section {
+    margin: auto;
+    max-width: var(--options-card-max-width);
     border-radius: 12px;
     border: 1px solid var(--card-border-color) !important;
     box-shadow: var(--card-box-shadow);
@@ -43,8 +57,12 @@
 }
 
 .options-section hr {
+    --bs-border-width: 2px;
+
     margin-left: calc(var(--options-card-padding) * -1);
     margin-right: calc(var(--options-card-padding) * -1);
+    opacity: 1;
+    color: var(--root-background);
 }
 
 .options-section p:last-of-type:not(:first-of-type),
@@ -87,6 +105,11 @@
 
 /* Shortcuts */
 
+.shortcuts-options-section {
+    /* Allow the card to extend on the full width of the parent */
+    --options-card-max-width: 100%;
+}
+
 /* Group heading */
 .shortcuts-options-section .separator {
     padding-top: 2em;
@@ -102,4 +125,10 @@
     width: 100%;
     height: 2px;
     background: currentColor;
+}
+
+/* ETAPI */
+
+.etapi-options-section div {
+    height: auto !important;
 }
\ No newline at end of file