settings UI tweaks

tabby-terminal/src/components/appearanceSettingsTab.component.pug

@@ -33,88 +33,89 @@ h3.mb-3 Appearance
     .col-12.col-md-6
         color-scheme-preview([scheme]='config.store.terminal.colorScheme', [fontPreview]='true')
 
-.form-line
-    .header
-        .title Terminal background
+.content-box
+    .form-line
+        .header
+            .title Terminal background
 
-    .btn-group(
-        [(ngModel)]='config.store.terminal.background',
-        (ngModelChange)='config.save()',
-        ngbRadioGroup
+        .btn-group(
+            [(ngModel)]='config.store.terminal.background',
+            (ngModelChange)='config.save()',
+            ngbRadioGroup
+        )
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"theme"'
+                )
+                | From theme
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"colorScheme"'
+                )
+                | From color scheme
+
+    .form-line
+        .header
+            .title Cursor shape
+
+        .btn-group(
+            [(ngModel)]='config.store.terminal.cursor',
+            (ngModelChange)='config.save()',
+            ngbRadioGroup
+        )
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"block"'
+                )
+                | █
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"beam"'
+                )
+                | |
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"underline"'
+                )
+                | ▁
+
+    .form-line
+        .header
+            .title Blink cursor
+
+        toggle(
+            [(ngModel)]='config.store.terminal.cursorBlink',
+            (ngModelChange)='config.save()',
+        )
+
+    .form-line
+        .header
+            .title Fallback font
+            .description A second font family used to display characters missing in the main font
+
+        input.form-control(
+            type='text',
+            [ngbTypeahead]='fontAutocomplete',
+            [(ngModel)]='config.store.terminal.fallbackFont',
+            (ngModelChange)='config.save()'
+        )
+
+
+    .form-line
+        .header
+            .title Custom CSS
+
+    textarea.form-control.mb-5(
+        [(ngModel)]='config.store.appearance.css',
+        (ngModelChange)='saveConfiguration()',
     )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"theme"'
-            )
-            | From theme
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"colorScheme"'
-            )
-            | From color scheme
-
-.form-line
-    .header
-        .title Cursor shape
-
-    .btn-group(
-        [(ngModel)]='config.store.terminal.cursor',
-        (ngModelChange)='config.save()',
-        ngbRadioGroup
-    )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"block"'
-            )
-            | █
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"beam"'
-            )
-            | |
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"underline"'
-            )
-            | ▁
-
-.form-line
-    .header
-        .title Blink cursor
-
-    toggle(
-        [(ngModel)]='config.store.terminal.cursorBlink',
-        (ngModelChange)='config.save()',
-    )
-
-.form-line
-    .header
-        .title Fallback font
-        .description A second font family used to display characters missing in the main font
-
-    input.form-control(
-        type='text',
-        [ngbTypeahead]='fontAutocomplete',
-        [(ngModel)]='config.store.terminal.fallbackFont',
-        (ngModelChange)='config.save()'
-    )
-
-
-.form-line
-    .header
-        .title Custom CSS
-
-textarea.form-control.mb-5(
-    [(ngModel)]='config.store.appearance.css',
-    (ngModelChange)='saveConfiguration()',
-)

tabby-terminal/src/components/colorSchemeSettingsTab.component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import deepEqual from 'deep-equal'
 
-import { Component, Inject, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
+import { Component, Inject, Input, ChangeDetectionStrategy, ChangeDetectorRef, HostBinding } from '@angular/core'
 import { ConfigService, PlatformService } from 'tabby-core'
 import { TerminalColorSchemeProvider } from '../api/colorSchemeProvider'
 import { TerminalColorScheme } from '../api/interfaces'
@@ -23,6 +23,8 @@ export class ColorSchemeSettingsTabComponent {
     currentStockScheme: TerminalColorScheme|null = null
     currentCustomScheme: TerminalColorScheme|null = null
 
+    @HostBinding('class.content-box') true
+
     constructor (
         @Inject(TerminalColorSchemeProvider) private colorSchemeProviders: TerminalColorSchemeProvider[],
         private changeDetector: ChangeDetectorRef,

tabby-terminal/src/components/terminalSettingsTab.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, HostBinding } from '@angular/core'
 import { ConfigService, HostAppService, Platform, PlatformService } from 'tabby-core'
 
 /** @hidden */
@@ -8,6 +8,8 @@ import { ConfigService, HostAppService, Platform, PlatformService } from 'tabby-
 export class TerminalSettingsTabComponent {
     Platform = Platform
 
+    @HostBinding('class.content-box') true
+
     constructor (
         public config: ConfigService,
         public hostApp: HostAppService,