Align log settings fields and inset dropdown indicator

renderer/app.js

@@ -6505,20 +6505,28 @@ function renderSettings() {
   pages.logs.innerHTML = `
       ${pageHeader('Logs & Support', 'Protokollierung verwalten, Log-Dateien öffnen und ein bereinigtes Support-Paket erstellen.')}
       <div class="settings-section-label">Log</div>
-      <div class="settings-row log-file-path-row">
-        <label>FileUploader Log</label>
+      <div class="log-config-fields">
+      <div class="settings-row log-file-path-row log-config-row">
+        <label for="logFilePathInput">FileUploader Log</label>
+        <div class="log-path-controls">
         <input type="text" class="key-input settings-autosave" id="logFilePathInput" value="${escapeAttr(globalSettings.logFilePath || '')}" placeholder="Standardpfad verwenden">
         <button class="btn btn-xs btn-secondary" id="chooseLogFilePathBtn">Ordner wählen</button>
         <button class="btn btn-xs btn-secondary" id="openLogFolderBtn" title="Log-Ordner im Explorer öffnen">Öffnen</button>
+        </div>
       </div>
-      <div class="settings-row">
-        <label>Log-Datei-Modus</label>
+      <div class="settings-row log-config-row">
+        <label for="logModeInput">Log-Datei-Modus</label>
+        <div class="log-mode-controls">
+        <span class="settings-select-control">
         <select class="hs-input settings-autosave" id="logModeInput">
           <option value="single" ${(window.LogMode ? window.LogMode.normalizeLogMode(globalSettings) : (globalSettings.logMode || 'single')) === 'single' ? 'selected' : ''}>Eine Datei</option>
           <option value="daily" ${(window.LogMode ? window.LogMode.normalizeLogMode(globalSettings) : (globalSettings.logMode || 'single')) === 'daily' ? 'selected' : ''}>Pro Tag</option>
           <option value="session" ${(window.LogMode ? window.LogMode.normalizeLogMode(globalSettings) : (globalSettings.logMode || 'single')) === 'session' ? 'selected' : ''}>Pro Session</option>
         </select>
+        </span>
         <span class="hint">Pro Session = neue Datei bei jedem App-Start; nach komplettem Schließen + erneutem Öffnen beginnt eine neue Session.</span>
+        </div>
+      </div>
       </div>
       <div class="settings-option verbose-logging-option">
         <div class="settings-option-copy">

renderer/styles.css

@@ -3926,25 +3926,6 @@ input[type="checkbox"] {
   background: #3c3b6e;
 }
 
-.log-file-path-row {
-  display: flex !important;
-  align-items: center !important;
-  flex-wrap: wrap !important;
-  gap: 8px !important;
-}
-
-.log-file-path-row > label {
-  min-width: 140px !important;
-  flex: 1 1 190px;
-}
-
-.log-file-path-row > .key-input {
-  width: auto;
-  min-width: 180px !important;
-  max-width: 100%;
-  flex: 999 1 260px;
-}
-
 .log-file-path-row .btn {
   flex: 0 0 auto;
   white-space: nowrap;
@@ -4953,7 +4934,8 @@ input[type="checkbox"] {
   grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
 }
 
-.automation-select-control {
+.automation-select-control,
+.settings-select-control {
   display: block;
   position: relative;
   width: 100%;
@@ -4961,7 +4943,8 @@ input[type="checkbox"] {
   min-width: 0;
 }
 
-.automation-select-control::after {
+.automation-select-control::after,
+.settings-select-control::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -4974,7 +4957,8 @@ input[type="checkbox"] {
   pointer-events: none;
 }
 
-.settings-subpage .automation-select-control > select {
+.settings-subpage .automation-select-control > select,
+.settings-subpage .settings-select-control > select {
   appearance: none;
   padding-right: 38px;
   user-select: none;
@@ -5000,3 +4984,65 @@ input[type="checkbox"] {
     grid-template-columns: minmax(0, 1fr);
   }
 }
+
+.log-config-fields {
+  container: log-fields / inline-size;
+  min-width: 0;
+}
+
+.settings-subpage .settings-row.log-config-row {
+  display: grid;
+  grid-template-columns: 210px minmax(0, 1fr);
+  align-items: start;
+  gap: 12px;
+}
+
+.settings-subpage .settings-row.log-config-row > label {
+  min-width: 0;
+  padding-top: 9px;
+  line-height: 1.5;
+}
+
+.log-path-controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.log-mode-controls {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.settings-subpage .log-config-fields :is(.key-input, .hs-input) {
+  min-width: 0;
+  max-width: none;
+  width: 100%;
+  min-height: 40px;
+  border-radius: 6px;
+}
+
+@container log-fields (max-width: 620px) {
+  .settings-subpage .settings-row.log-config-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .settings-subpage .settings-row.log-config-row > label {
+    padding-top: 0;
+  }
+}
+
+@container log-fields (max-width: 380px) {
+  .log-path-controls {
+    grid-template-columns: auto auto;
+    justify-content: start;
+  }
+
+  .log-path-controls > input {
+    grid-column: 1 / -1;
+  }
+}