Improve bridge options text and styling

ext/src/_locales/en/messages.json

@@ -310,13 +310,21 @@
         "description": "Backup daemon checkbox description."
     },
     "optionsBridgeBackupSecure": {
-        "message": "Use a secure daemon connection",
+        "message": "Use a secure connection",
         "description": "Daemon secure option checkbox label."
     },
+    "optionsBridgeBackupSecureDescription": {
+        "message": "Connects to the daemon via HTTPS instead of HTTP. Requires additional configuration.",
+        "description": "Daemon secure option description."
+    },
     "optionsBridgeBackupPassword": {
         "message": "Password:",
         "description": "Daemon password option label."
     },
+    "optionsBridgeBackupPasswordDescription": {
+        "message": "The optional password configured for the daemon connections.",
+        "description": "Daemon password option description."
+    },
 
     "optionsMediaCategoryName": {
         "message": "Media casting",

ext/src/ui/options/Bridge.svelte

@@ -279,7 +279,10 @@
         </div>
 
         {#if opts.showAdvancedOptions}
-            <fieldset class="category" disabled={!opts.bridgeBackupEnabled}>
+            <fieldset
+                class="bridge__daemon-options"
+                disabled={!opts.bridgeBackupEnabled}
+            >
                 <div class="option option--inline">
                     <div class="option__control">
                         <input
@@ -291,6 +294,9 @@
                     <label class="option__label" for="bridgeBackupSecure">
                         {_("optionsBridgeBackupSecure")}
                     </label>
+                    <div class="option__description">
+                        {_("optionsBridgeBackupSecureDescription")}
+                    </div>
                 </div>
                 <div class="option">
                     <label class="option__label" for="bridgeBackupPassword">
@@ -303,6 +309,9 @@
                             type="password"
                             bind:value={opts.bridgeBackupPassword}
                         />
+                        <div class="option__description">
+                            {_("optionsBridgeBackupPasswordDescription")}
+                        </div>
                     </div>
                 </div>
             </fieldset>

ext/src/ui/options/styles/index.css

@@ -153,6 +153,18 @@ input:placeholder-shown {
 .bridge__options {
     margin-top: 30px;
 }
+.bridge__daemon-options {
+    column-gap: 10px;
+    border: initial;
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    margin-left: 20px;
+}
+.bridge__daemon-options > .option:not(.option--inline) {
+    display: flex;
+    gap: inherit;
+}
 
 .bridge__update-info {
     align-items: center;
@@ -182,8 +194,8 @@ input:placeholder-shown {
 
 .bridge__backup-host,
 .bridge__backup-port {
-    margin-left: 0.5em;
+    margin-left: 2px;
-    margin-right: 0.5em;
+    margin-right: 2px;
 }
 
 .bridge__backup-host {
@@ -201,17 +213,13 @@ input:placeholder-shown {
 .category {
     border: initial;
     display: grid;
-    grid-template-columns: 150px minmax(0, 1fr);
+    grid-template-columns: 120px minmax(0, 1fr);
     grid-column-gap: 10px;
     grid-row-gap: 5px;
     margin: initial;
     padding: 10px 0;
 }
 
-.bridge__options > .category {
-    grid-template-columns: 100px minmax(0, 1fr);
-}
-
 .form > .category {
     border-bottom: 1px solid var(--border-color);
 }
@@ -278,8 +286,8 @@ input:placeholder-shown {
     display: inline-block;
 }
 
-.category:disabled .option__label,
+fieldset:disabled .option__label,
-.category:disabled .option__description {
+fieldset:disabled .option__description {
     opacity: 0.65;
 }
 
@@ -297,7 +305,7 @@ input:placeholder-shown {
     font-size: smaller;
     grid-column: span 2;
     margin: 5px 0;
-    max-width: 45ch;
+    max-width: 60ch;
 }
 
 .option > input,
@@ -426,9 +434,6 @@ input:placeholder-shown {
 input[id^="customUserAgentString-"] {
     width: -moz-available;
 }
-#bridgeBackupPassword {
-    margin-inline-start: 5px;
-}
 
 @media (prefers-color-scheme: dark) {
     .whitelist__item:nth-child(even) {