[FIX] issues #36,#37,#38 &39

dist/chrome/css/options_main_page.css

@@ -381,3 +381,298 @@ hr {
 .small-note{font-size:12px;opacity:.8;}
 .timesheet-download-link{display:inline-block;margin-right:8px;color:inherit;}
 .no-remotes-set{padding-left:0;}
+/* THERP LAYOUT PREFS — Preferences page */
+.layout-pref-card {
+  max-width: 760px;
+  padding: 16px 18px;
+  border: 1px solid #d9e4ec;
+  border-radius: 10px;
+  background: #fff;
+  margin-bottom: 16px;
+}
+.layout-pref-grid {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
+  gap: 14px 18px;
+}
+.layout-pref-field label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+.layout-pref-field input,
+.layout-pref-field select {
+  width: 100%;
+  min-height: 38px;
+  box-sizing: border-box;
+}
+.layout-pref-help {
+  margin-top: 5px;
+  font-size: 12px;
+  opacity: .72;
+}
+.layout-pref-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 18px;
+}
+.layout-pref-actions button { min-width: 120px; }
+@media (max-width: 760px) {
+  .layout-pref-grid { grid-template-columns: 1fr; }
+}
+
+/* THERP ADVANCED LAYOUT PREFS V4 — Options page
+ * Preferences form is always styled. Saved browser-specific values apply only
+ * while .tt-layout-customized is present.
+ */
+html.tt-layout-customized body {
+  font-size: var(--tt-options-font-size);
+}
+html.tt-layout-customized #navigation .chooser {
+  font-size: var(--tt-options-sidebar-font-size);
+}
+html.tt-layout-customized .remotes-table-info table {
+  min-width: var(--tt-remotes-min-width);
+  font-size: var(--tt-remotes-font-size);
+}
+html.tt-layout-customized .remotes-table-info thead th {
+  white-space: var(--tt-remotes-header-wrap);
+  font-size: var(--tt-remotes-header-font-size);
+}
+html.tt-layout-customized .remotes-table-info th,
+html.tt-layout-customized .remotes-table-info td {
+  padding-top: var(--tt-remotes-cell-pad-y);
+  padding-bottom: var(--tt-remotes-cell-pad-y);
+}
+
+/* Saved remotes: keep one outer page horizontal scrollbar, not a nested one. */
+.remotes-table-info {
+  overflow: visible !important;
+}
+.remotes-table-info table {
+  width: max-content;
+  min-width: 760px;
+}
+.remotes-table-info .remote-row-actions {
+  white-space: nowrap;
+  min-width: 64px;
+}
+
+/* Rounded, bolder, well-positioned left-hand Back button. */
+#navigation .footer-app {
+  position: absolute;
+  left: 0;
+  bottom: 18px;
+  width: 100%;
+  padding: 0 0 0 18px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+#navigation .footer-app .nav-hand-button {
+  width: 44px;
+  height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #1fa7e6;
+  border-radius: 50%;
+  background: #ffffff;
+  color: #1fa7e6;
+  text-decoration: none;
+  box-sizing: border-box;
+  box-shadow: 0 2px 7px rgba(31, 167, 230, 0.16);
+}
+#navigation .footer-app .nav-hand-button:hover {
+  background: #eef8ff;
+  color: #1fa7e6;
+}
+#navigation .footer-app .nav-hand-button .fa {
+  margin: 0;
+  font-size: 24px;
+  -webkit-text-stroke: 0.45px currentColor;
+  transform: scale(1.08);
+}
+
+/* Advanced Preferences form */
+.layout-pref-card {
+  max-width: 940px;
+  padding: 16px 18px;
+  border: 1px solid #d9e4ec;
+  border-radius: 10px;
+  background: #fff;
+  margin-bottom: 16px;
+}
+.layout-pref-section {
+  margin: 0 0 16px;
+  padding: 12px 14px;
+  border: 1px solid #e3e8ee;
+  border-radius: 8px;
+  background: #fbfcfe;
+}
+.layout-pref-section > summary {
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 15px;
+}
+.layout-pref-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(160px, 1fr));
+  gap: 12px 16px;
+  margin-top: 12px;
+}
+.layout-pref-field label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+.layout-pref-field input,
+.layout-pref-field select {
+  width: 100%;
+  min-height: 36px;
+  box-sizing: border-box;
+}
+.layout-pref-field input[type="checkbox"] {
+  width: auto;
+  min-height: 0;
+}
+.layout-pref-help {
+  margin-top: 5px;
+  font-size: 12px;
+  opacity: .76;
+}
+.layout-pref-error {
+  margin: 10px 0;
+  padding: 10px 12px;
+  border: 1px solid #dc3545;
+  background: #fff4f4;
+  color: #a51d2a;
+  border-radius: 6px;
+}
+.layout-pref-actions {
+  position: sticky;
+  bottom: 0;
+  z-index: 5;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px 0;
+  background: #fff;
+  border-top: 1px solid #e5e7eb;
+}
+.layout-pref-actions button {
+  min-width: 135px;
+}
+@media (max-width: 900px) {
+  .layout-pref-grid {
+    grid-template-columns: repeat(2, minmax(160px, 1fr));
+  }
+}
+@media (max-width: 650px) {
+  .layout-pref-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* THERP FINAL POLISH V5 — Preferences usability and overflow */
+
+/* The fixed sidebar stays visually complete while the page uses only its outer
+ * scrollbars. Preferences content never slides underneath it. */
+#navigation {
+  height: 100vh !important;
+  min-height: 100vh;
+}
+#maincontent {
+  position: relative !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  min-height: 100vh !important;
+  height: auto !important;
+  overflow: visible !important;
+  box-sizing: border-box;
+}
+.options-box {
+  width: calc(100% - 180px);
+  max-width: calc(100% - 180px);
+  min-width: 0;
+  box-sizing: border-box;
+}
+.layout-pref-card {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Do not let a sticky action bar drift under the fixed navigation when the
+ * document is horizontally scrolled. Keep it in normal form flow. */
+.layout-pref-actions {
+  position: static !important;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px 0 4px;
+  margin-top: 8px;
+  background: transparent;
+}
+
+.layout-pref-suggested {
+  position: relative;
+  padding: 8px;
+  margin: -8px;
+  border: 1px solid #38bdf8;
+  border-radius: 7px;
+  background: #eff9ff;
+  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.10);
+  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
+}
+.layout-pref-suggested input,
+.layout-pref-suggested select {
+  border-color: #38bdf8 !important;
+  box-shadow: 0 0 0 1px rgba(56, 189, 248, .16);
+}
+.layout-pref-suggested::after {
+  content: "Suggested";
+  position: absolute;
+  top: -9px;
+  right: 7px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: #38bdf8;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 16px;
+}
+.layout-suggestion-note {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  margin: 12px 0 4px;
+  padding: 10px 12px;
+  border: 1px solid #8fdcff;
+  border-radius: 8px;
+  background: #f0faff;
+  color: #344054;
+  line-height: 1.45;
+}
+.layout-suggestion-note > .fa {
+  flex: 0 0 auto;
+  margin-top: 2px;
+  color: #1fa7e6;
+  font-size: 18px;
+}
+
+/* Native color inputs are small by default; make the suggested/highlight state
+ * and normal editing target clear and consistent. */
+.layout-pref-field input[type="color"] {
+  min-height: 38px;
+  padding: 3px;
+  cursor: pointer;
+}
+
+/* Logo help is readable but secondary. */
+.logo-file-help {
+  max-width: 760px;
+  margin: 7px 0 0;
+  line-height: 1.4;
+}