diff --git a/.editorconfig b/.editorconfig
index 39b95a275..0ee0dfacd 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -4,7 +4,7 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,jsx,ts,tsx,cjs,json,yml,yaml,css,less}]
+[*.{js,jsx,ts,tsx,cjs,json,yml,yaml,css,less,scss}]
 charset = utf-8
 indent_style = space
 indent_size = 4
diff --git a/frontend/app/app.scss b/frontend/app/app.scss
index 6e780796e..d2cc0275d 100644
--- a/frontend/app/app.scss
+++ b/frontend/app/app.scss
@@ -5,148 +5,148 @@
 @use "theme.scss";
 
 body {
-  display: flex;
-  flex-direction: row;
-  width: 100vw;
-  height: 100vh;
-  color: var(--main-text-color);
-  font: var(--base-font);
-  overflow: hidden;
-  background: rgb(from var(--main-bg-color) r g b / var(--window-opacity));
-  -webkit-font-smoothing: auto;
-  backface-visibility: hidden;
-  transform: translateZ(0);
+    display: flex;
+    flex-direction: row;
+    width: 100vw;
+    height: 100vh;
+    color: var(--main-text-color);
+    font: var(--base-font);
+    overflow: hidden;
+    background: rgb(from var(--main-bg-color) r g b / var(--window-opacity));
+    -webkit-font-smoothing: auto;
+    backface-visibility: hidden;
+    transform: translateZ(0);
 }
 
 .is-transparent {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 a.plain-link {
-  color: var(--secondary-text-color);
+    color: var(--secondary-text-color);
 }
 
 *::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+    width: 4px;
+    height: 4px;
 }
 
 *::-webkit-scrollbar-track {
-  background-color: var(--scrollbar-background-color);
+    background-color: var(--scrollbar-background-color);
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-color);
-  border-radius: 4px;
-  margin: 0 1px 0 1px;
+    background-color: var(--scrollbar-thumb-color);
+    border-radius: 4px;
+    margin: 0 1px 0 1px;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-hover-color);
+    background-color: var(--scrollbar-thumb-hover-color);
 }
 
 .flex-spacer {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 
 .text-fixed {
-  font: var(--fixed-font);
+    font: var(--fixed-font);
 }
 
 #main,
 .mainapp {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-
-  .app-background {
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    left: 0;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
-    z-index: var(--zindex-app-background);
-  }
+
+    .app-background {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: var(--zindex-app-background);
+    }
 }
 
 .error-boundary {
-  color: var(--error-color);
+    color: var(--error-color);
 }
 
 /* OverlayScrollbars styling */
 .os-scrollbar {
-  --os-handle-bg: var(--scrollbar-thumb-color);
-  --os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
-  --os-handle-bg-active: var(--scrollbar-thumb-active-color);
+    --os-handle-bg: var(--scrollbar-thumb-color);
+    --os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
+    --os-handle-bg-active: var(--scrollbar-thumb-active-color);
 }
 
 .scrollbar-hide-until-hover {
-  *::-webkit-scrollbar-thumb,
-  *::-webkit-scrollbar-track {
-    display: none;
-  }
+    *::-webkit-scrollbar-thumb,
+    *::-webkit-scrollbar-track {
+        display: none;
+    }
 
-  *::-webkit-scrollbar-corner {
-    display: none;
-  }
+    *::-webkit-scrollbar-corner {
+        display: none;
+    }
 
-  *:hover::-webkit-scrollbar-thumb {
-    display: block;
-  }
+    *:hover::-webkit-scrollbar-thumb {
+        display: block;
+    }
 }
 
 a {
-  color: var(--accent-color);
+    color: var(--accent-color);
 }
 
 .prefers-reduced-motion {
-  * {
-    transition-duration: none !important;
-    transition-timing-function: none !important;
-    transition-property: none !important;
-    transition-delay: none !important;
-  }
+    * {
+        transition-duration: none !important;
+        transition-timing-function: none !important;
+        transition-property: none !important;
+        transition-delay: none !important;
+    }
 }
 
 .flash-error-container {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-  z-index: var(--zindex-flash-error-container);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .flash-error {
-    background: var(--error-color);
-    color: var(--main-text-color);
-    border-radius: 4px;
-    padding: 10px;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: var(--zindex-flash-error-container);
     display: flex;
     flex-direction: column;
-    width: 280px;
-    border: 1px solid transparent;
-    max-height: 100px;
-    cursor: pointer;
+    gap: 10px;
 
-    .flash-error-scroll {
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-    }
+    .flash-error {
+        background: var(--error-color);
+        color: var(--main-text-color);
+        border-radius: 4px;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        width: 280px;
+        border: 1px solid transparent;
+        max-height: 100px;
+        cursor: pointer;
 
-    &.hovered {
-      border: 1px solid var(--main-text-color);
-    }
+        .flash-error-scroll {
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+        }
 
-    .flash-error-title {
-      font-weight: bold;
-      margin-bottom: 5px;
-    }
+        &.hovered {
+            border: 1px solid var(--main-text-color);
+        }
 
-    .flash-error-message {
+        .flash-error-title {
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+
+        .flash-error-message {
+        }
     }
-  }
 }
diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss
index 94598df78..b3db9222e 100644
--- a/frontend/app/block/block.scss
+++ b/frontend/app/block/block.scss
@@ -4,423 +4,423 @@
 @use "../mixins.scss";
 
 .block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  min-height: 0;
-  border-radius: var(--block-border-radius);
-
-  .block-frame-icon {
-    margin-right: 0.5em;
-  }
-
-  .block-content {
-    position: relative;
     display: flex;
-    flex-grow: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     width: 100%;
+    height: 100%;
     overflow: hidden;
     min-height: 0;
-    padding: 5px;
+    border-radius: var(--block-border-radius);
 
-    &.block-no-padding {
-      padding: 0;
+    .block-frame-icon {
+        margin-right: 0.5em;
     }
-  }
 
-  .block-focuselem {
-    height: 0;
-    width: 0;
-    input {
-      width: 0;
-      height: 0;
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-
-  .block-header-animation-wrap {
-    max-height: 0;
-    transition:
-      max-height 0.3s ease-out,
-      opacity 0.3s ease-out;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 30px;
-    z-index: var(--zindex-header-hover);
-
-    &.is-showing {
-      max-height: 30px;
-    }
-  }
-
-  &.block-preview.block-frame-default .block-frame-default-inner .block-frame-default-header {
-    background-color: rgb(from var(--block-bg-color) r g b / 70%);
-  }
-
-  &.block-frame-default {
-    position: relative;
-    padding: 1px;
-
-    .block-frame-default-inner {
-      background-color: var(--block-bg-color);
-      width: 100%;
-      height: 100%;
-      border-radius: var(--block-border-radius);
-      display: flex;
-      flex-direction: column;
-
-      .block-frame-default-header {
-        max-height: var(--header-height);
-        min-height: var(--header-height);
+    .block-content {
+        position: relative;
         display: flex;
-        padding: 4px 5px 4px 10px;
-        align-items: center;
-        gap: 8px;
-        font: var(--header-font);
-        border-bottom: 1px solid var(--border-color);
-        border-radius: var(--block-border-radius) var(--block-border-radius) 0 0;
+        flex-grow: 1;
+        width: 100%;
+        overflow: hidden;
+        min-height: 0;
+        padding: 5px;
 
-        .block-frame-default-header-iconview {
-          display: flex;
-          flex-shrink: 3;
-          min-width: 17px;
-          align-items: center;
-          gap: 8px;
-          overflow-x: hidden;
-
-          .block-frame-view-icon {
-            font-size: var(--header-icon-size);
-            opacity: 0.5;
-            width: var(--header-icon-width);
-            i {
-              margin-right: 0;
-            }
-          }
-
-          .block-frame-view-type {
-            overflow-x: hidden;
-            text-wrap: nowrap;
-            text-overflow: ellipsis;
-            flex-shrink: 1;
-            min-width: 0;
-          }
-
-          .block-frame-blockid {
-            opacity: 0.5;
-          }
+        &.block-no-padding {
+            padding: 0;
         }
+    }
 
-        .block-frame-text {
-          @include mixins.ellipsis();
-          font: var(--fixed-font);
-          font-size: 11px;
-          opacity: 0.7;
-          flex-grow: 1;
-
-          &.preview-filename {
-            direction: rtl;
-            text-align: left;
-            span {
-              cursor: pointer;
-
-              &:hover {
-                background: var(--highlight-bg-color);
-              }
-            }
-          }
+    .block-focuselem {
+        height: 0;
+        width: 0;
+        input {
+            width: 0;
+            height: 0;
+            opacity: 0;
+            pointer-events: none;
         }
+    }
 
-        .connection-button {
-          display: flex;
-          align-items: center;
-          flex-wrap: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          min-width: 0;
-          font-weight: 400;
-          color: var(--main-text-color);
-          border-radius: 2px;
-          padding: auto;
+    .block-header-animation-wrap {
+        max-height: 0;
+        transition:
+            max-height 0.3s ease-out,
+            opacity 0.3s ease-out;
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 30px;
+        z-index: var(--zindex-header-hover);
 
-          &:hover {
-            background-color: var(--highlight-bg-color);
-          }
-
-          .connection-icon-box {
-            flex: 1 1 auto;
-            overflow: hidden;
-          }
-
-          .connection-name {
-            flex: 1 2 auto;
-            overflow: hidden;
-            padding-right: 4px;
-          }
-
-          .connecting-svg {
-            position: relative;
-            top: 5px;
-            left: 9px;
-            svg {
-              fill: var(--warning-color);
-            }
-          }
+        &.is-showing {
+            max-height: 30px;
         }
+    }
 
-        .block-frame-textelems-wrapper {
-          display: flex;
-          flex: 1 2 auto;
-          min-width: 0;
-          gap: 8px;
-          align-items: center;
+    &.block-preview.block-frame-default .block-frame-default-inner .block-frame-default-header {
+        background-color: rgb(from var(--block-bg-color) r g b / 70%);
+    }
 
-          .block-frame-div {
-            display: flex;
+    &.block-frame-default {
+        position: relative;
+        padding: 1px;
+
+        .block-frame-default-inner {
+            background-color: var(--block-bg-color);
             width: 100%;
             height: 100%;
-            justify-content: space-between;
-            align-items: center;
-
-            .input-wrapper {
-              flex-grow: 1;
-
-              input {
-                background-color: transparent;
-                outline: none;
-                border: none;
-                color: var(--main-text-color);
-                width: 100%;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                box-sizing: border-box;
-                opacity: 0.7;
-                font-weight: 500;
-              }
-            }
-
-            .button {
-              margin-left: 3px;
-            }
-
-            // webview specific. for refresh button
-            .iconbutton {
-              height: 100%;
-              width: 27px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-          }
-
-          .menubutton {
-            .button {
-              font-size: 11px;
-            }
-          }
-        }
-
-        .block-frame-end-icons {
-          display: flex;
-          flex-shrink: 0;
-
-          .iconbutton {
-            display: flex;
-            width: 24px;
-            padding: 4px 6px;
-            align-items: center;
-          }
-
-          .block-frame-magnify {
-            justify-content: center;
-            align-items: center;
-            padding: 0;
-
-            svg {
-              #arrow1,
-              #arrow2 {
-                fill: var(--main-text-color);
-              }
-            }
-          }
-        }
-      }
-
-      .block-frame-preview {
-        background-color: rgb(from var(--block-bg-color) r g b / 70%);
-        width: 100%;
-        flex-grow: 1;
-        border-bottom-left-radius: var(--block-border-radius);
-        border-bottom-right-radius: var(--block-border-radius);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .iconbutton {
-          opacity: 0.7;
-          font-size: 45px;
-          margin: -30px 0 0 0;
-        }
-      }
-    }
-
-    --magnified-block-opacity: 0.6;
-    --magnified-block-blur: 10px;
-
-    &.magnified,
-    &.ephemeral {
-      background-color: rgb(from var(--block-bg-color) r g b / var(--magnified-block-opacity));
-      backdrop-filter: blur(var(--magnified-block-blur));
-    }
-
-    .connstatus-overlay {
-      position: absolute;
-      top: calc(var(--header-height) + 6px);
-      left: 6px;
-      right: 6px;
-      z-index: var(--zindex-block-mask-inner);
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      flex-direction: column;
-      overflow: hidden;
-      background: var(--conn-status-overlay-bg-color);
-      backdrop-filter: blur(50px);
-      border-radius: 6px;
-      box-shadow: 0px 13px 16px 0px rgb(from var(--block-bg-color) r g b / 40%);
-
-      .connstatus-content {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        padding: 10px 8px 10px 12px;
-        width: 100%;
-        font: var(--base-font);
-        color: var(--secondary-text-color);
-        gap: 12px;
-
-        .connstatus-status-icon-wrapper {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          gap: 12px;
-          flex-grow: 1;
-          min-width: 0;
-
-          &.has-error {
-            align-items: flex-start;
-          }
-
-          > i {
-            color: #e6ba1e;
-            font-size: 16px;
-          }
-
-          .connstatus-status {
-            @include mixins.ellipsis();
+            border-radius: var(--block-border-radius);
             display: flex;
             flex-direction: column;
-            align-items: flex-start;
-            gap: 4px;
-            flex-grow: 1;
-            width: 100%;
 
-            .connstatus-status-text {
-              @include mixins.ellipsis();
-              max-width: 100%;
-              font-size: 11px;
-              font-style: normal;
-              font-weight: 600;
-              line-height: 16px;
-              letter-spacing: 0.11px;
-              color: white;
+            .block-frame-default-header {
+                max-height: var(--header-height);
+                min-height: var(--header-height);
+                display: flex;
+                padding: 4px 5px 4px 10px;
+                align-items: center;
+                gap: 8px;
+                font: var(--header-font);
+                border-bottom: 1px solid var(--border-color);
+                border-radius: var(--block-border-radius) var(--block-border-radius) 0 0;
+
+                .block-frame-default-header-iconview {
+                    display: flex;
+                    flex-shrink: 3;
+                    min-width: 17px;
+                    align-items: center;
+                    gap: 8px;
+                    overflow-x: hidden;
+
+                    .block-frame-view-icon {
+                        font-size: var(--header-icon-size);
+                        opacity: 0.5;
+                        width: var(--header-icon-width);
+                        i {
+                            margin-right: 0;
+                        }
+                    }
+
+                    .block-frame-view-type {
+                        overflow-x: hidden;
+                        text-wrap: nowrap;
+                        text-overflow: ellipsis;
+                        flex-shrink: 1;
+                        min-width: 0;
+                    }
+
+                    .block-frame-blockid {
+                        opacity: 0.5;
+                    }
+                }
+
+                .block-frame-text {
+                    @include mixins.ellipsis();
+                    font: var(--fixed-font);
+                    font-size: 11px;
+                    opacity: 0.7;
+                    flex-grow: 1;
+
+                    &.preview-filename {
+                        direction: rtl;
+                        text-align: left;
+                        span {
+                            cursor: pointer;
+
+                            &:hover {
+                                background: var(--highlight-bg-color);
+                            }
+                        }
+                    }
+                }
+
+                .connection-button {
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    min-width: 0;
+                    font-weight: 400;
+                    color: var(--main-text-color);
+                    border-radius: 2px;
+                    padding: auto;
+
+                    &:hover {
+                        background-color: var(--highlight-bg-color);
+                    }
+
+                    .connection-icon-box {
+                        flex: 1 1 auto;
+                        overflow: hidden;
+                    }
+
+                    .connection-name {
+                        flex: 1 2 auto;
+                        overflow: hidden;
+                        padding-right: 4px;
+                    }
+
+                    .connecting-svg {
+                        position: relative;
+                        top: 5px;
+                        left: 9px;
+                        svg {
+                            fill: var(--warning-color);
+                        }
+                    }
+                }
+
+                .block-frame-textelems-wrapper {
+                    display: flex;
+                    flex: 1 2 auto;
+                    min-width: 0;
+                    gap: 8px;
+                    align-items: center;
+
+                    .block-frame-div {
+                        display: flex;
+                        width: 100%;
+                        height: 100%;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .input-wrapper {
+                            flex-grow: 1;
+
+                            input {
+                                background-color: transparent;
+                                outline: none;
+                                border: none;
+                                color: var(--main-text-color);
+                                width: 100%;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                box-sizing: border-box;
+                                opacity: 0.7;
+                                font-weight: 500;
+                            }
+                        }
+
+                        .button {
+                            margin-left: 3px;
+                        }
+
+                        // webview specific. for refresh button
+                        .iconbutton {
+                            height: 100%;
+                            width: 27px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        }
+                    }
+
+                    .menubutton {
+                        .button {
+                            font-size: 11px;
+                        }
+                    }
+                }
+
+                .block-frame-end-icons {
+                    display: flex;
+                    flex-shrink: 0;
+
+                    .iconbutton {
+                        display: flex;
+                        width: 24px;
+                        padding: 4px 6px;
+                        align-items: center;
+                    }
+
+                    .block-frame-magnify {
+                        justify-content: center;
+                        align-items: center;
+                        padding: 0;
+
+                        svg {
+                            #arrow1,
+                            #arrow2 {
+                                fill: var(--main-text-color);
+                            }
+                        }
+                    }
+                }
             }
 
-            .connstatus-error {
-              @include mixins.ellipsis();
-              width: 94%;
-              font-size: 11px;
-              font-style: normal;
-              font-weight: 400;
-              line-height: 15px;
-              letter-spacing: 0.11px;
+            .block-frame-preview {
+                background-color: rgb(from var(--block-bg-color) r g b / 70%);
+                width: 100%;
+                flex-grow: 1;
+                border-bottom-left-radius: var(--block-border-radius);
+                border-bottom-right-radius: var(--block-border-radius);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .iconbutton {
+                    opacity: 0.7;
+                    font-size: 45px;
+                    margin: -30px 0 0 0;
+                }
             }
-          }
         }
 
-        .connstatus-actions {
-          display: flex;
-          align-items: flex-start;
-          justify-content: center;
-          gap: 6px;
+        --magnified-block-opacity: 0.6;
+        --magnified-block-blur: 10px;
 
-          button {
-            i {
-              font-size: 11px;
-              opacity: 0.7;
+        &.magnified,
+        &.ephemeral {
+            background-color: rgb(from var(--block-bg-color) r g b / var(--magnified-block-opacity));
+            backdrop-filter: blur(var(--magnified-block-blur));
+        }
+
+        .connstatus-overlay {
+            position: absolute;
+            top: calc(var(--header-height) + 6px);
+            left: 6px;
+            right: 6px;
+            z-index: var(--zindex-block-mask-inner);
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex-direction: column;
+            overflow: hidden;
+            background: var(--conn-status-overlay-bg-color);
+            backdrop-filter: blur(50px);
+            border-radius: 6px;
+            box-shadow: 0px 13px 16px 0px rgb(from var(--block-bg-color) r g b / 40%);
+
+            .connstatus-content {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                padding: 10px 8px 10px 12px;
+                width: 100%;
+                font: var(--base-font);
+                color: var(--secondary-text-color);
+                gap: 12px;
+
+                .connstatus-status-icon-wrapper {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    gap: 12px;
+                    flex-grow: 1;
+                    min-width: 0;
+
+                    &.has-error {
+                        align-items: flex-start;
+                    }
+
+                    > i {
+                        color: #e6ba1e;
+                        font-size: 16px;
+                    }
+
+                    .connstatus-status {
+                        @include mixins.ellipsis();
+                        display: flex;
+                        flex-direction: column;
+                        align-items: flex-start;
+                        gap: 4px;
+                        flex-grow: 1;
+                        width: 100%;
+
+                        .connstatus-status-text {
+                            @include mixins.ellipsis();
+                            max-width: 100%;
+                            font-size: 11px;
+                            font-style: normal;
+                            font-weight: 600;
+                            line-height: 16px;
+                            letter-spacing: 0.11px;
+                            color: white;
+                        }
+
+                        .connstatus-error {
+                            @include mixins.ellipsis();
+                            width: 94%;
+                            font-size: 11px;
+                            font-style: normal;
+                            font-weight: 400;
+                            line-height: 15px;
+                            letter-spacing: 0.11px;
+                        }
+                    }
+                }
+
+                .connstatus-actions {
+                    display: flex;
+                    align-items: flex-start;
+                    justify-content: center;
+                    gap: 6px;
+
+                    button {
+                        i {
+                            font-size: 11px;
+                            opacity: 0.7;
+                        }
+                    }
+
+                    .button:last-child {
+                        margin-top: 1.5px;
+                    }
+                }
             }
-          }
-
-          .button:last-child {
-            margin-top: 1.5px;
-          }
         }
-      }
-    }
 
-    .block-mask {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border: 2px solid transparent;
-      pointer-events: none;
-      padding: 2px;
-      border-radius: calc(var(--block-border-radius) + 2px);
-      z-index: var(--zindex-block-mask-inner);
-
-      &.show-block-mask {
-        user-select: none;
-        pointer-events: auto;
-      }
-
-      &.show-block-mask .block-mask-inner {
-        margin-top: var(--header-height); // TODO fix this magic
-        background-color: rgb(from var(--block-bg-color) r g b / 50%);
-        height: calc(100% - var(--header-height));
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .bignum {
-          margin-top: -15%;
-          font-size: 60px;
-          font-weight: bold;
-          opacity: 0.7;
-        }
-      }
-    }
-
-    &.block-focused {
-      .block-mask {
-        border: 2px solid var(--accent-color);
-      }
-
-      &.block-no-highlight,
-      &.block-preview {
         .block-mask {
-          border: 2px solid rgb(from var(--border-color) r g b / 10%) !important;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 2px solid transparent;
+            pointer-events: none;
+            padding: 2px;
+            border-radius: calc(var(--block-border-radius) + 2px);
+            z-index: var(--zindex-block-mask-inner);
+
+            &.show-block-mask {
+                user-select: none;
+                pointer-events: auto;
+            }
+
+            &.show-block-mask .block-mask-inner {
+                margin-top: var(--header-height); // TODO fix this magic
+                background-color: rgb(from var(--block-bg-color) r g b / 50%);
+                height: calc(100% - var(--header-height));
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .bignum {
+                    margin-top: -15%;
+                    font-size: 60px;
+                    font-weight: bold;
+                    opacity: 0.7;
+                }
+            }
+        }
+
+        &.block-focused {
+            .block-mask {
+                border: 2px solid var(--accent-color);
+            }
+
+            &.block-no-highlight,
+            &.block-preview {
+                .block-mask {
+                    border: 2px solid rgb(from var(--border-color) r g b / 10%) !important;
+                }
+            }
         }
-      }
     }
-  }
 }
diff --git a/frontend/app/element/avatar.scss b/frontend/app/element/avatar.scss
index c84be2409..e5495cc44 100644
--- a/frontend/app/element/avatar.scss
+++ b/frontend/app/element/avatar.scss
@@ -4,54 +4,54 @@
 @use "../mixins.scss";
 
 .avatar {
-  position: relative;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  background-color: var(--border-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--main-text-color);
-  font-size: 18px;
-  text-transform: uppercase;
-
-  .avatar-image {
-    width: 100%;
-    height: 100%;
+    position: relative;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
-    object-fit: cover;
-  }
+    background-color: var(--border-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--main-text-color);
+    font-size: 18px;
+    text-transform: uppercase;
 
-  .avatar-initials {
-    font-weight: bold;
-  }
-
-  .status-indicator {
-    position: absolute;
-    bottom: 2px;
-    right: 2px;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: transparent;
-
-    &.online {
-      background-color: var(--success-color);
+    .avatar-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
     }
 
-    &.offline {
-      background-color: var(--grey-text-color);
+    .avatar-initials {
+        font-weight: bold;
     }
 
-    &.busy {
-      background-color: var(--error-color);
+    .status-indicator {
+        position: absolute;
+        bottom: 2px;
+        right: 2px;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background-color: transparent;
+
+        &.online {
+            background-color: var(--success-color);
+        }
+
+        &.offline {
+            background-color: var(--grey-text-color);
+        }
+
+        &.busy {
+            background-color: var(--error-color);
+        }
+
+        &.away {
+            background-color: var(--warning-color);
+        }
     }
 
-    &.away {
-      background-color: var(--warning-color);
-    }
-  }
-
-  @include mixins.avatar-dims-mixin();
+    @include mixins.avatar-dims-mixin();
 }
diff --git a/frontend/app/element/button.scss b/frontend/app/element/button.scss
index 86e9d202f..cca0930c0 100644
--- a/frontend/app/element/button.scss
+++ b/frontend/app/element/button.scss
@@ -4,163 +4,163 @@
 @use "../mixins.scss";
 
 .button {
-  // override default button appearance
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  border: 1px solid transparent;
+    // override default button appearance
+    border: 1px solid transparent;
+    outline: 1px solid transparent;
+    border: 1px solid transparent;
 
-  cursor: pointer;
-  display: flex;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 20px;
-  padding-right: 20px;
-  align-items: center;
-  gap: 4px;
-  border-radius: 6px;
-  height: auto;
-  line-height: 16px;
-  white-space: nowrap;
-  user-select: none;
-  font-size: 14px;
-  font-weight: normal;
-  transition: all 0.3s ease;
-
-  &.solid {
-    &.green {
-      color: var(--button-text-color);
-      background-color: var(--accent-color);
-      border: 1px solid var(--button-green-border-color);
-      &:hover {
-        color: var(--button-text-color);
-        background-color: var(--button-green-border-color);
-      }
-    }
-
-    &.grey {
-      background-color: var(--button-grey-bg);
-      border: 1px solid var(--button-grey-bg);
-      color: var(--main-text-color);
-      &:hover {
-        color: var(--main-text-color);
-        background-color: var(--button-grey-hover-bg);
-      }
-    }
-
-    &.red {
-      background-color: var(--button-red-bg);
-      border: 1px solid var(--button-red-border-color);
-      color: var(--main-text-color);
-      &:hover {
-        background-color: var(--button-red-hover-bg);
-      }
-    }
-
-    &.yellow {
-      color: var(--button-text-color);
-      background-color: var(--button-yellow-bg);
-      border: 1px solid var(--button-yellow-hover-bg);
-      &:hover {
-        color: var(--button-text-color);
-        background-color: var(--button-yellow-hover-bg);
-      }
-    }
-  }
-
-  &.outlined {
-    background-color: transparent;
-    &.green {
-      color: var(--accent-color);
-      border: 1px solid var(--accent-color);
-      &:hover {
-        color: var(--button-green-border-color);
-        border: 1px solid var(--button-green-border-color);
-      }
-    }
-
-    &.grey {
-      border: 1px solid var(--button-grey-outlined-color);
-      color: var(--button-grey-outlined-color);
-      &:hover {
-        color: var(--main-text-color);
-        border: 1px solid var(--main-text-color);
-      }
-    }
-
-    &.red {
-      border: 1px solid var(--button-red-bg);
-      color: var(--button-red-bg);
-      &:hover {
-        color: var(--button-red-outlined-color);
-        border: 1px solid var(--button-red-outlined-color);
-      }
-    }
-
-    &.yellow {
-      color: var(--button-yellow-bg);
-      border: 1px solid var(--button-yellow-bg);
-      &:hover {
-        color: var(--button-yellow-hover-bg);
-        border: 1px solid var(--button-yellow-hover-bg);
-      }
-    }
-  }
-
-  &.ghost {
-    background-color: transparent;
+    cursor: pointer;
+    display: flex;
     padding-top: 8px;
     padding-bottom: 8px;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 20px;
+    padding-right: 20px;
+    align-items: center;
+    gap: 4px;
+    border-radius: 6px;
+    height: auto;
+    line-height: 16px;
+    white-space: nowrap;
+    user-select: none;
+    font-size: 14px;
+    font-weight: normal;
+    transition: all 0.3s ease;
 
-    &.green {
-      border: none;
-      color: var(--accent-color);
-      &:hover {
-        color: var(--button-green-border-color);
-      }
+    &.solid {
+        &.green {
+            color: var(--button-text-color);
+            background-color: var(--accent-color);
+            border: 1px solid var(--button-green-border-color);
+            &:hover {
+                color: var(--button-text-color);
+                background-color: var(--button-green-border-color);
+            }
+        }
+
+        &.grey {
+            background-color: var(--button-grey-bg);
+            border: 1px solid var(--button-grey-bg);
+            color: var(--main-text-color);
+            &:hover {
+                color: var(--main-text-color);
+                background-color: var(--button-grey-hover-bg);
+            }
+        }
+
+        &.red {
+            background-color: var(--button-red-bg);
+            border: 1px solid var(--button-red-border-color);
+            color: var(--main-text-color);
+            &:hover {
+                background-color: var(--button-red-hover-bg);
+            }
+        }
+
+        &.yellow {
+            color: var(--button-text-color);
+            background-color: var(--button-yellow-bg);
+            border: 1px solid var(--button-yellow-hover-bg);
+            &:hover {
+                color: var(--button-text-color);
+                background-color: var(--button-yellow-hover-bg);
+            }
+        }
     }
 
-    &.grey {
-      border: none;
-      color: var(--button-grey-outlined-color);
-      &:hover {
-        color: var(--main-text-color);
-      }
+    &.outlined {
+        background-color: transparent;
+        &.green {
+            color: var(--accent-color);
+            border: 1px solid var(--accent-color);
+            &:hover {
+                color: var(--button-green-border-color);
+                border: 1px solid var(--button-green-border-color);
+            }
+        }
+
+        &.grey {
+            border: 1px solid var(--button-grey-outlined-color);
+            color: var(--button-grey-outlined-color);
+            &:hover {
+                color: var(--main-text-color);
+                border: 1px solid var(--main-text-color);
+            }
+        }
+
+        &.red {
+            border: 1px solid var(--button-red-bg);
+            color: var(--button-red-bg);
+            &:hover {
+                color: var(--button-red-outlined-color);
+                border: 1px solid var(--button-red-outlined-color);
+            }
+        }
+
+        &.yellow {
+            color: var(--button-yellow-bg);
+            border: 1px solid var(--button-yellow-bg);
+            &:hover {
+                color: var(--button-yellow-hover-bg);
+                border: 1px solid var(--button-yellow-hover-bg);
+            }
+        }
     }
 
-    &.red {
-      border: none;
-      color: var(--button-red-bg);
-      &:hover {
-        color: var(--button-red-border-color);
-      }
+    &.ghost {
+        background-color: transparent;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        padding-left: 8px;
+        padding-right: 8px;
+
+        &.green {
+            border: none;
+            color: var(--accent-color);
+            &:hover {
+                color: var(--button-green-border-color);
+            }
+        }
+
+        &.grey {
+            border: none;
+            color: var(--button-grey-outlined-color);
+            &:hover {
+                color: var(--main-text-color);
+            }
+        }
+
+        &.red {
+            border: none;
+            color: var(--button-red-bg);
+            &:hover {
+                color: var(--button-red-border-color);
+            }
+        }
+
+        &.yellow {
+            border: none;
+            color: var(--button-yellow-bg);
+            &:hover {
+                color: var(--button-yellow-hover-bg);
+            }
+        }
     }
 
-    &.yellow {
-      border: none;
-      color: var(--button-yellow-bg);
-      &:hover {
-        color: var(--button-yellow-hover-bg);
-      }
+    &:disabled {
+        cursor: default;
+        opacity: 0.5;
+        pointer-events: none;
     }
-  }
 
-  &:disabled {
-    cursor: default;
-    opacity: 0.5;
-    pointer-events: none;
-  }
+    &:focus-visible {
+        outline: 1px solid var(--success-color);
+        outline-offset: 2px;
+    }
 
-  &:focus-visible {
-    outline: 1px solid var(--success-color);
-    outline-offset: 2px;
-  }
-
-  // Include mixins
-  @include mixins.border-radius-mixin();
-  @include mixins.vertical-padding-mixin();
-  @include mixins.horizontal-padding-mixin();
-  @include mixins.font-size-mixin();
-  @include mixins.font-weight-mixin();
+    // Include mixins
+    @include mixins.border-radius-mixin();
+    @include mixins.vertical-padding-mixin();
+    @include mixins.horizontal-padding-mixin();
+    @include mixins.font-size-mixin();
+    @include mixins.font-weight-mixin();
 }
diff --git a/frontend/app/element/collapsiblemenu.scss b/frontend/app/element/collapsiblemenu.scss
index ebdc1645b..b73f1f083 100644
--- a/frontend/app/element/collapsiblemenu.scss
+++ b/frontend/app/element/collapsiblemenu.scss
@@ -4,61 +4,61 @@
 @use "../mixins.scss";
 
 .collapsible-menu {
-  list-style: none;
-  padding: 0;
+    list-style: none;
+    padding: 0;
 }
 
 .collapsible-menu-item {
-  padding: 10px;
-  cursor: pointer;
-  user-select: none;
-  padding: 0;
+    padding: 10px;
+    cursor: pointer;
+    user-select: none;
+    padding: 0;
 }
 
 .collapsible-menu-item-button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
 }
 
 .collapsible-menu-item-content {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 .collapsible-menu-item-icon {
-  margin-right: 10px; /* Space between icon and text */
+    margin-right: 10px; /* Space between icon and text */
 }
 
 .collapsible-menu-item-text {
-  @include mixins.ellipsis();
-  text-decoration: none;
+    @include mixins.ellipsis();
+    text-decoration: none;
 }
 
 .nested-list {
-  list-style: none;
-  padding-left: 20px;
+    list-style: none;
+    padding-left: 20px;
 }
 
 .nested-list.open {
-  display: block;
+    display: block;
 }
 
 .nested-list.closed {
-  display: none;
+    display: none;
 }
 
 .collapsible-menu-item-button {
-  padding: 10px;
-  color: var(--main-text-color);
+    padding: 10px;
+    color: var(--main-text-color);
 
-  &:hover {
-    background-color: var(--button-grey-hover-bg);
-    border-radius: 4px;
-  }
+    &:hover {
+        background-color: var(--button-grey-hover-bg);
+        border-radius: 4px;
+    }
 }
 
 .collapsible-menu-item-button.clickable:hover {
-  background-color: #f0f0f0;
+    background-color: #f0f0f0;
 }
diff --git a/frontend/app/element/copybutton.scss b/frontend/app/element/copybutton.scss
index a74e03f9a..1689a0f97 100644
--- a/frontend/app/element/copybutton.scss
+++ b/frontend/app/element/copybutton.scss
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .copy-button {
-  &.copied {
-    opacity: 1;
-    i {
-      color: var(--success-color);
+    &.copied {
+        opacity: 1;
+        i {
+            color: var(--success-color);
+        }
     }
-  }
 }
diff --git a/frontend/app/element/emojipalette.scss b/frontend/app/element/emojipalette.scss
index f85b19c55..b45118589 100644
--- a/frontend/app/element/emojipalette.scss
+++ b/frontend/app/element/emojipalette.scss
@@ -2,39 +2,39 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .emoji-palette-content {
-  padding: 10px;
-  max-height: 350px;
-  width: 300px;
-  display: flex;
-  flex-direction: column;
+    padding: 10px;
+    max-height: 350px;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
 }
 
 .emoji-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
-  gap: 10px;
-  padding: 10px 0;
-  width: 100%;
-  height: 300px;
-  overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
+    gap: 10px;
+    padding: 10px 0;
+    width: 100%;
+    height: 300px;
+    overflow-y: auto;
 }
 
 .emoji-button {
-  font-size: 24px;
-  padding: 5px;
-  cursor: pointer;
-  background: none;
-  border: none;
-  transition: background-color 0.3s ease;
+    font-size: 24px;
+    padding: 5px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    transition: background-color 0.3s ease;
 
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-  }
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+    }
 }
 
 .no-emojis {
-  font-size: 14px;
-  color: #888;
-  text-align: center;
+    font-size: 14px;
+    color: #888;
+    text-align: center;
 }
diff --git a/frontend/app/element/expandablemenu.scss b/frontend/app/element/expandablemenu.scss
index 06709cc97..741ee91f6 100644
--- a/frontend/app/element/expandablemenu.scss
+++ b/frontend/app/element/expandablemenu.scss
@@ -4,70 +4,70 @@
 @use "../mixins.scss";
 
 .expandable-menu {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  overflow: visible;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: visible;
 }
 
 .expandable-menu-item,
 .expandable-menu-item-group-title {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px; /* Left and right padding, we'll adjust this for the right side */
-  cursor: pointer;
-  box-sizing: border-box;
-  border-radius: 4px;
+    display: flex;
+    align-items: center;
+    padding: 8px 12px; /* Left and right padding, we'll adjust this for the right side */
+    cursor: pointer;
+    box-sizing: border-box;
+    border-radius: 4px;
 
-  .label {
-    @include mixins.ellipsis();
-  }
+    .label {
+        @include mixins.ellipsis();
+    }
 }
 
 .expandable-menu-item-group-title {
-  &:hover {
-    background-color: var(--button-grey-hover-bg);
-  }
+    &:hover {
+        background-color: var(--button-grey-hover-bg);
+    }
 }
 
 .expandable-menu-item {
-  &.with-hover-effect {
-    &:hover {
-      background-color: var(--button-grey-hover-bg);
+    &.with-hover-effect {
+        &:hover {
+            background-color: var(--button-grey-hover-bg);
+        }
     }
-  }
 }
 
 .expandable-menu-item-left,
 .expandable-menu-item-right {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 .expandable-menu-item-left {
-  margin-right: 8px; /* Space for the left element */
+    margin-right: 8px; /* Space for the left element */
 }
 
 .expandable-menu-item-right {
-  margin-left: auto; /* This keeps the right element (if any) on the far right */
-  white-space: nowrap;
+    margin-left: auto; /* This keeps the right element (if any) on the far right */
+    white-space: nowrap;
 }
 
 .expandable-menu-item-content {
-  flex-grow: 1; /* Ensures the content grows to fill available space between left and right elements */
+    flex-grow: 1; /* Ensures the content grows to fill available space between left and right elements */
 }
 
 .expandable-menu-item-group-content {
-  max-height: 0;
-  overflow: hidden;
-  margin-left: 16px; /* Retaining left indentation */
-  margin-right: 0; /* Removing right padding */
+    max-height: 0;
+    overflow: hidden;
+    margin-left: 16px; /* Retaining left indentation */
+    margin-right: 0; /* Removing right padding */
 
-  &.open {
-    max-height: 1000px; /* Ensure large enough max-height for expansion */
-  }
+    &.open {
+        max-height: 1000px; /* Ensure large enough max-height for expansion */
+    }
 }
 
 .no-indent .expandable-menu-item-group-content {
-  margin-left: 0; // Remove left indentation when noIndent is true
+    margin-left: 0; // Remove left indentation when noIndent is true
 }
diff --git a/frontend/app/element/flyoutmenu.scss b/frontend/app/element/flyoutmenu.scss
index 3b485b145..83f20c1f6 100644
--- a/frontend/app/element/flyoutmenu.scss
+++ b/frontend/app/element/flyoutmenu.scss
@@ -4,51 +4,51 @@
 @use "../mixins.scss";
 
 .menu {
-  position: absolute;
-  z-index: 1000;
-  display: flex;
-  max-width: 400px;
-  min-width: 125px;
-  padding: 2px;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-start;
-  gap: 1px;
-  border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: #212121;
-  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
+    position: absolute;
+    z-index: 1000;
+    display: flex;
+    max-width: 400px;
+    min-width: 125px;
+    padding: 2px;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 1px;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: #212121;
+    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
 }
 
 .menu-item {
-  display: flex;
-  align-items: center;
-  padding: 4px 6px;
-  cursor: pointer;
-  color: var(--main-text-color);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  letter-spacing: -0.12px;
-  width: 100%;
-  border-radius: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .label {
-    @include mixins.ellipsis();
-    text-decoration: none;
-  }
-}
-
-.menu-item {
-  color: var(--main-text-color);
-
-  &:hover {
-    background-color: var(--accent-color);
-    color: var(--button-text-color);
+    display: flex;
+    align-items: center;
+    padding: 4px 6px;
+    cursor: pointer;
+    color: var(--main-text-color);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -0.12px;
+    width: 100%;
     border-radius: 2px;
-  }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .label {
+        @include mixins.ellipsis();
+        text-decoration: none;
+    }
+}
+
+.menu-item {
+    color: var(--main-text-color);
+
+    &:hover {
+        background-color: var(--accent-color);
+        color: var(--button-text-color);
+        border-radius: 2px;
+    }
 }
diff --git a/frontend/app/element/iconbutton.scss b/frontend/app/element/iconbutton.scss
index 30039304b..d781a23a9 100644
--- a/frontend/app/element/iconbutton.scss
+++ b/frontend/app/element/iconbutton.scss
@@ -1,25 +1,25 @@
 .iconbutton {
-  cursor: pointer;
-  opacity: 0.7;
-  align-items: center;
+    cursor: pointer;
+    opacity: 0.7;
+    align-items: center;
 
-  &.bulb {
-    color: var(--bulb-color);
-    opacity: 1;
+    &.bulb {
+        color: var(--bulb-color);
+        opacity: 1;
 
-    &:hover i::before {
-      content: "\f672";
-      position: relative;
-      left: -1px;
+        &:hover i::before {
+            content: "\f672";
+            position: relative;
+            left: -1px;
+        }
     }
-  }
 
-  &:hover {
-    opacity: 1;
-  }
+    &:hover {
+        opacity: 1;
+    }
 
-  &.disabled {
-    cursor: default;
-    opacity: 0.45 !important;
-  }
+    &.disabled {
+        cursor: default;
+        opacity: 0.45 !important;
+    }
 }
diff --git a/frontend/app/element/input.scss b/frontend/app/element/input.scss
index daaf40a0e..fda37d42a 100644
--- a/frontend/app/element/input.scss
+++ b/frontend/app/element/input.scss
@@ -4,90 +4,90 @@
 @use "../mixins.scss";
 
 .input {
-  width: 100%;
-  border: none;
-  font-size: 12px;
-  outline: none;
-  background-color: transparent;
-  color: var(--form-element-text-color);
-  background: var(--form-element-bg-color);
-  border: 2px solid var(--form-element-border-color);
-  border-radius: 6px;
-  padding: 4px 7px;
+    width: 100%;
+    border: none;
+    font-size: 12px;
+    outline: none;
+    background-color: transparent;
+    color: var(--form-element-text-color);
+    background: var(--form-element-bg-color);
+    border: 2px solid var(--form-element-border-color);
+    border-radius: 6px;
+    padding: 4px 7px;
 
-  &:focus {
-    border-color: var(--form-element-primary-color);
-  }
+    &:focus {
+        border-color: var(--form-element-primary-color);
+    }
 
-  &.disabled {
-    opacity: 0.75;
-  }
+    &.disabled {
+        opacity: 0.75;
+    }
 
-  &.error {
-    border-color: var(--form-element-error-color);
-  }
+    &.error {
+        border-color: var(--form-element-error-color);
+    }
 
-  // Include mixins
-  @include mixins.border-radius-mixin();
-  @include mixins.vertical-padding-mixin();
-  @include mixins.horizontal-padding-mixin();
-  @include mixins.font-size-mixin();
-  @include mixins.font-weight-mixin();
+    // Include mixins
+    @include mixins.border-radius-mixin();
+    @include mixins.vertical-padding-mixin();
+    @include mixins.horizontal-padding-mixin();
+    @include mixins.font-size-mixin();
+    @include mixins.font-weight-mixin();
 }
 
 /* Styles when an InputGroup is present */
 .input-group {
-  display: flex;
-  align-items: center;
-  border-radius: 6px;
-  position: relative;
-  width: 100%;
-  border: 2px solid var(--form-element-border-color);
-  background: var(--form-element-bg-color);
-
-  /* Focus style for InputGroup */
-  &.focused {
-    border-color: var(--form-element-primary-color);
-  }
-
-  /* Error state for InputGroup */
-  &.error {
-    border-color: var(--form-element-error-color);
-  }
-
-  /* Disabled state for InputGroup */
-  &.disabled {
-    opacity: 0.75;
-  }
-
-  &:hover {
-    cursor: text;
-  }
-
-  .input-left-element,
-  .input-right-element {
-    padding: 0 5px;
     display: flex;
     align-items: center;
-    justify-content: center;
-  }
+    border-radius: 6px;
+    position: relative;
+    width: 100%;
+    border: 2px solid var(--form-element-border-color);
+    background: var(--form-element-bg-color);
 
-  .input {
-    border: none;
-    flex-grow: 1;
-    border-radius: none;
-
-    &:focus {
-      border-color: transparent;
+    /* Focus style for InputGroup */
+    &.focused {
+        border-color: var(--form-element-primary-color);
     }
 
+    /* Error state for InputGroup */
     &.error {
-      border-color: transparent;
+        border-color: var(--form-element-error-color);
     }
-  }
 
-  // Include mixins
-  @include mixins.border-radius-mixin();
-  @include mixins.font-size-mixin();
-  @include mixins.font-weight-mixin();
+    /* Disabled state for InputGroup */
+    &.disabled {
+        opacity: 0.75;
+    }
+
+    &:hover {
+        cursor: text;
+    }
+
+    .input-left-element,
+    .input-right-element {
+        padding: 0 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .input {
+        border: none;
+        flex-grow: 1;
+        border-radius: none;
+
+        &:focus {
+            border-color: transparent;
+        }
+
+        &.error {
+            border-color: transparent;
+        }
+    }
+
+    // Include mixins
+    @include mixins.border-radius-mixin();
+    @include mixins.font-size-mixin();
+    @include mixins.font-weight-mixin();
 }
diff --git a/frontend/app/element/linkbutton.scss b/frontend/app/element/linkbutton.scss
index c4409a077..a50be7c6f 100644
--- a/frontend/app/element/linkbutton.scss
+++ b/frontend/app/element/linkbutton.scss
@@ -2,5 +2,5 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .link-button {
-  text-decoration: none;
+    text-decoration: none;
 }
diff --git a/frontend/app/element/magnify.scss b/frontend/app/element/magnify.scss
index 8cfe3522c..111674fdd 100644
--- a/frontend/app/element/magnify.scss
+++ b/frontend/app/element/magnify.scss
@@ -2,30 +2,30 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .magnify-icon {
-  display: inline-block;
-  width: 15px;
-  height: 15px;
-  svg {
-    #arrow1 {
-      transform: rotate(180deg);
-      transform-origin: calc(29.167% + 4px) calc(70.833% + 4px); // account for path offset in the svg itself
-    }
-    #arrow2 {
-      transform: rotate(-180deg);
-      transform-origin: calc(70.833% + 4px) calc(29.167% + 4px);
-    }
-    #arrow1,
-    #arrow2 {
-      transition: transform 300ms ease-in;
-      transition-delay: 100ms;
-    }
-  }
-  &.enabled {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
     svg {
-      #arrow1,
-      #arrow2 {
-        transform: rotate(0deg);
-      }
+        #arrow1 {
+            transform: rotate(180deg);
+            transform-origin: calc(29.167% + 4px) calc(70.833% + 4px); // account for path offset in the svg itself
+        }
+        #arrow2 {
+            transform: rotate(-180deg);
+            transform-origin: calc(70.833% + 4px) calc(29.167% + 4px);
+        }
+        #arrow1,
+        #arrow2 {
+            transition: transform 300ms ease-in;
+            transition-delay: 100ms;
+        }
+    }
+    &.enabled {
+        svg {
+            #arrow1,
+            #arrow2 {
+                transform: rotate(0deg);
+            }
+        }
     }
-  }
 }
diff --git a/frontend/app/element/markdown.scss b/frontend/app/element/markdown.scss
index 92bb9fff9..9673f2681 100644
--- a/frontend/app/element/markdown.scss
+++ b/frontend/app/element/markdown.scss
@@ -2,210 +2,210 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .markdown {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
-
-  .content {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
     height: 100%;
     width: 100%;
-    overflow: scroll;
-    line-height: 1.5;
-    color: var(--main-text-color);
-    font-family: var(--markdown-font);
-    font-size: 14px;
-    overflow-wrap: break-word;
 
-    &.non-scrollable {
-      overflow: hidden;
-    }
-
-    .heading {
-      &:first-of-type {
-        margin-top: 0 !important;
-      }
-      color: var(--main-text-color);
-      margin-top: 16px;
-      margin-bottom: 8px;
-    }
-
-    strong {
-      color: var(--main-text-color);
-    }
-
-    a {
-      color: #32afff;
-    }
-
-    ul {
-      list-style-type: disc;
-      list-style-position: outside;
-      margin-left: 16px;
-    }
-
-    ol {
-      list-style-position: outside;
-      margin-left: 19px;
-    }
-
-    blockquote {
-      margin: 4px 10px 4px 10px;
-      border-radius: 3px;
-      background-color: var(--panel-bg-color);
-      padding: 2px 4px 2px 6px;
-    }
-
-    pre.codeblock {
-      background-color: var(--panel-bg-color);
-      margin: 4px 10px;
-      padding: 0.4em 0.7em;
-      border-radius: 4px;
-      position: relative;
-
-      code {
+    .content {
+        height: 100%;
+        width: 100%;
+        overflow: scroll;
         line-height: 1.5;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        overflow: auto;
-        overflow: hidden;
-        background-color: transparent;
-      }
-
-      .codeblock-actions {
-        visibility: hidden;
-        display: flex;
-        position: absolute;
-        top: 0;
-        right: 0;
-        border-radius: 4px;
-        backdrop-filter: blur(8px);
-        margin: 2px 2px;
-        padding: 4px 4px;
-        align-items: center;
-        justify-content: flex-end;
-        gap: 4px;
-      }
-
-      &:hover .codeblock-actions {
-        visibility: visible;
-      }
-    }
-
-    code {
-      color: var(--main-text-color);
-      font: var(--fixed-font);
-      border-radius: 4px;
-    }
-
-    pre.selected {
-      outline: 2px solid var(--accent-color);
-    }
-
-    .heading {
-      font-weight: semibold;
-      padding-top: 6px;
-    }
-
-    .heading.is-1 {
-      border-bottom: 1px solid var(--border-color);
-      padding-bottom: 6px;
-      font-size: 2em;
-    }
-    .heading.is-2 {
-      border-bottom: 1px solid var(--border-color);
-      padding-bottom: 6px;
-      font-size: 1.5em;
-    }
-    .heading.is-3 {
-      font-size: 1.25em;
-    }
-    .heading.is-4 {
-      font-size: 1em;
-    }
-    .heading.is-5 {
-      font-size: 0.875em;
-    }
-    .heading.is-6 {
-      font-size: 0.85em;
-    }
-
-    .waveblock {
-      margin: 16px 0;
-
-      .wave-block-content {
-        display: flex;
-        align-items: center;
-        padding: 12px;
-        background-color: var(--highlight-bg-color);
-        border: 1px solid var(--border-color);
-        border-radius: 8px;
-        transition: background-color 0.2s ease;
-      }
-
-      .wave-block-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        background-color: black;
-        border-radius: 8px;
-        margin-right: 12px;
-      }
-
-      .wave-block-icon i {
-        font-size: 18px;
-        color: var(--secondary-text-color);
-      }
-
-      .wave-block-info {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .wave-block-filename {
-        font-size: 14px;
-        font-weight: 500;
         color: var(--main-text-color);
-      }
+        font-family: var(--markdown-font);
+        font-size: 14px;
+        overflow-wrap: break-word;
 
-      .wave-block-size {
-        font-size: 12px;
-        color: var(--secondary-text-color);
-      }
+        &.non-scrollable {
+            overflow: hidden;
+        }
+
+        .heading {
+            &:first-of-type {
+                margin-top: 0 !important;
+            }
+            color: var(--main-text-color);
+            margin-top: 16px;
+            margin-bottom: 8px;
+        }
+
+        strong {
+            color: var(--main-text-color);
+        }
+
+        a {
+            color: #32afff;
+        }
+
+        ul {
+            list-style-type: disc;
+            list-style-position: outside;
+            margin-left: 16px;
+        }
+
+        ol {
+            list-style-position: outside;
+            margin-left: 19px;
+        }
+
+        blockquote {
+            margin: 4px 10px 4px 10px;
+            border-radius: 3px;
+            background-color: var(--panel-bg-color);
+            padding: 2px 4px 2px 6px;
+        }
+
+        pre.codeblock {
+            background-color: var(--panel-bg-color);
+            margin: 4px 10px;
+            padding: 0.4em 0.7em;
+            border-radius: 4px;
+            position: relative;
+
+            code {
+                line-height: 1.5;
+                white-space: pre-wrap;
+                word-wrap: break-word;
+                overflow: auto;
+                overflow: hidden;
+                background-color: transparent;
+            }
+
+            .codeblock-actions {
+                visibility: hidden;
+                display: flex;
+                position: absolute;
+                top: 0;
+                right: 0;
+                border-radius: 4px;
+                backdrop-filter: blur(8px);
+                margin: 2px 2px;
+                padding: 4px 4px;
+                align-items: center;
+                justify-content: flex-end;
+                gap: 4px;
+            }
+
+            &:hover .codeblock-actions {
+                visibility: visible;
+            }
+        }
+
+        code {
+            color: var(--main-text-color);
+            font: var(--fixed-font);
+            border-radius: 4px;
+        }
+
+        pre.selected {
+            outline: 2px solid var(--accent-color);
+        }
+
+        .heading {
+            font-weight: semibold;
+            padding-top: 6px;
+        }
+
+        .heading.is-1 {
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 6px;
+            font-size: 2em;
+        }
+        .heading.is-2 {
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 6px;
+            font-size: 1.5em;
+        }
+        .heading.is-3 {
+            font-size: 1.25em;
+        }
+        .heading.is-4 {
+            font-size: 1em;
+        }
+        .heading.is-5 {
+            font-size: 0.875em;
+        }
+        .heading.is-6 {
+            font-size: 0.85em;
+        }
+
+        .waveblock {
+            margin: 16px 0;
+
+            .wave-block-content {
+                display: flex;
+                align-items: center;
+                padding: 12px;
+                background-color: var(--highlight-bg-color);
+                border: 1px solid var(--border-color);
+                border-radius: 8px;
+                transition: background-color 0.2s ease;
+            }
+
+            .wave-block-icon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 40px;
+                height: 40px;
+                background-color: black;
+                border-radius: 8px;
+                margin-right: 12px;
+            }
+
+            .wave-block-icon i {
+                font-size: 18px;
+                color: var(--secondary-text-color);
+            }
+
+            .wave-block-info {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .wave-block-filename {
+                font-size: 14px;
+                font-weight: 500;
+                color: var(--main-text-color);
+            }
+
+            .wave-block-size {
+                font-size: 12px;
+                color: var(--secondary-text-color);
+            }
+        }
     }
-  }
 
-  // The TOC view should scroll independently of the contents view.
-  .toc {
-    max-width: 40%;
-    height: 100%;
-    overflow: scroll;
-    border-left: 1px solid var(--border-color);
-    .toc-inner {
-      height: fit-content;
-      position: sticky;
-      top: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-      text-wrap: wrap;
+    // The TOC view should scroll independently of the contents view.
+    .toc {
+        max-width: 40%;
+        height: 100%;
+        overflow: scroll;
+        border-left: 1px solid var(--border-color);
+        .toc-inner {
+            height: fit-content;
+            position: sticky;
+            top: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            text-wrap: wrap;
 
-      h4 {
-        padding-left: 5px;
-      }
+            h4 {
+                padding-left: 5px;
+            }
 
-      .toc-item {
-        cursor: pointer;
-        --indent-factor: 1;
+            .toc-item {
+                cursor: pointer;
+                --indent-factor: 1;
 
-        // The 5px offset in the padding will ensure that when the text in the item wraps, it indents slightly.
-        // The indent factor is set in the React code and denotes the depth of the item in the TOC tree.
-        padding-left: calc((var(--indent-factor) - 1) * 10px + 5px);
-        text-indent: -5px;
-      }
+                // The 5px offset in the padding will ensure that when the text in the item wraps, it indents slightly.
+                // The indent factor is set in the React code and denotes the depth of the item in the TOC tree.
+                padding-left: calc((var(--indent-factor) - 1) * 10px + 5px);
+                text-indent: -5px;
+            }
+        }
     }
-  }
 }
diff --git a/frontend/app/element/menubutton.scss b/frontend/app/element/menubutton.scss
index d68980970..e74601aa4 100644
--- a/frontend/app/element/menubutton.scss
+++ b/frontend/app/element/menubutton.scss
@@ -1,15 +1,15 @@
 .menubutton {
-  overflow: hidden;
-  .menu-anchor {
-    width: 100%;
-    .button {
-      width: 100%;
-      div {
-        max-width: 100%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        flex-shrink: 1;
-      }
+    overflow: hidden;
+    .menu-anchor {
+        width: 100%;
+        .button {
+            width: 100%;
+            div {
+                max-width: 100%;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                flex-shrink: 1;
+            }
+        }
     }
-  }
 }
diff --git a/frontend/app/element/modal.scss b/frontend/app/element/modal.scss
index 99f24921f..5339d03fb 100644
--- a/frontend/app/element/modal.scss
+++ b/frontend/app/element/modal.scss
@@ -2,56 +2,56 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .modal-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100%;
-  z-index: var(--zindex-elem-modal);
-  background-color: rgba(21, 23, 21, 0.7);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100%;
+    z-index: var(--zindex-elem-modal);
+    background-color: rgba(21, 23, 21, 0.7);
 
-  .modal {
-    display: flex;
-    flex-direction: column;
-    border-radius: 10px;
-    padding: 0;
-    width: 80%;
-    margin-top: 25vh;
-    margin-left: auto;
-    margin-right: auto;
-    background: var(--main-bg-color);
-    border: 1px solid var(--border-color);
+    .modal {
+        display: flex;
+        flex-direction: column;
+        border-radius: 10px;
+        padding: 0;
+        width: 80%;
+        margin-top: 25vh;
+        margin-left: auto;
+        margin-right: auto;
+        background: var(--main-bg-color);
+        border: 1px solid var(--border-color);
 
-    .modal-header {
-      display: flex;
-      flex-direction: column;
-      padding: 20px 20px 10px;
-      border-bottom: 1px solid var(--border-color);
+        .modal-header {
+            display: flex;
+            flex-direction: column;
+            padding: 20px 20px 10px;
+            border-bottom: 1px solid var(--border-color);
 
-      .modal-title {
-        margin: 0 0 5px;
-        color: var(--main-text-color);
-        font-size: var(--title-font-size);
-      }
+            .modal-title {
+                margin: 0 0 5px;
+                color: var(--main-text-color);
+                font-size: var(--title-font-size);
+            }
 
-      p {
-        margin: 0;
-        font-size: 0.8rem;
-        color: var(--secondary-text-color);
-      }
+            p {
+                margin: 0;
+                font-size: 0.8rem;
+                color: var(--secondary-text-color);
+            }
+        }
+
+        .modal-content {
+            padding: 20px;
+            overflow: auto;
+        }
+
+        .modal-footer {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            padding: 15px 20px;
+            gap: 20px;
+        }
     }
-
-    .modal-content {
-      padding: 20px;
-      overflow: auto;
-    }
-
-    .modal-footer {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      padding: 15px 20px;
-      gap: 20px;
-    }
-  }
 }
diff --git a/frontend/app/element/multilineinput.scss b/frontend/app/element/multilineinput.scss
index d9f00b8f4..0296eeddc 100644
--- a/frontend/app/element/multilineinput.scss
+++ b/frontend/app/element/multilineinput.scss
@@ -2,23 +2,23 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .multiline-input {
-  flex-grow: 1;
-  box-shadow: none;
-  box-sizing: border-box;
-  background-color: transparent;
-  resize: none;
-  overflow-y: auto;
-  line-height: 1.5;
-  color: var(--form-element-text-color);
-  vertical-align: top;
-  height: auto;
-  padding: 0;
-  border: 1px solid var(--form-element-border-color);
-  padding: 5px;
-  border-radius: 4px;
-  min-height: 26px;
+    flex-grow: 1;
+    box-shadow: none;
+    box-sizing: border-box;
+    background-color: transparent;
+    resize: none;
+    overflow-y: auto;
+    line-height: 1.5;
+    color: var(--form-element-text-color);
+    vertical-align: top;
+    height: auto;
+    padding: 0;
+    border: 1px solid var(--form-element-border-color);
+    padding: 5px;
+    border-radius: 4px;
+    min-height: 26px;
 
-  &:focus-visible {
-    outline: none;
-  }
+    &:focus-visible {
+        outline: none;
+    }
 }
diff --git a/frontend/app/element/popover.scss b/frontend/app/element/popover.scss
index bd4217653..32af28ef3 100644
--- a/frontend/app/element/popover.scss
+++ b/frontend/app/element/popover.scss
@@ -2,15 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .popover-content {
-  min-width: 100px;
-  min-height: 150px;
-  position: absolute;
-  z-index: 1000; // TODO: put this in theme.scss
-  display: flex;
-  padding: 2px;
-  gap: 1px;
-  border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: #212121;
-  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
+    min-width: 100px;
+    min-height: 150px;
+    position: absolute;
+    z-index: 1000; // TODO: put this in theme.scss
+    display: flex;
+    padding: 2px;
+    gap: 1px;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: #212121;
+    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
 }
diff --git a/frontend/app/element/quickelems.scss b/frontend/app/element/quickelems.scss
index 5d09ceedd..b4f845323 100644
--- a/frontend/app/element/quickelems.scss
+++ b/frontend/app/element/quickelems.scss
@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .centered-div {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 }
diff --git a/frontend/app/element/quicktips.scss b/frontend/app/element/quicktips.scss
index f21c8e36c..e3ff547e8 100644
--- a/frontend/app/element/quicktips.scss
+++ b/frontend/app/element/quicktips.scss
@@ -2,85 +2,85 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tips-wrapper {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  width: 100%;
-
-  .tips-section {
     display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: 5px;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
 
-    .tip-section-header {
-      font-weight: bold;
-      margin-bottom: 5px;
-      margin-top: 10px;
-      font-size: 16px;
-
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-
-    .tip {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      code {
-        padding: 0.1em 0.4em;
-        background-color: var(--highlight-bg-color);
-      }
-
-      .keybinding-group {
+    .tips-section {
         display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-left: 5px;
-        margin-right: 5px;
-        align-self: flex-start;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: 5px;
 
-        &:first-child {
-          margin-left: 0;
+        .tip-section-header {
+            font-weight: bold;
+            margin-bottom: 5px;
+            margin-top: 10px;
+            font-size: 16px;
+
+            &:first-child {
+                margin-top: 0;
+            }
         }
-      }
 
-      .keybinding {
-        display: inline-block;
-        padding: 0.1em 0.4em;
-        margin: 0 0.1em;
-        font: var(--fixed-font);
-        font-size: 0.85em;
-        color: var(--keybinding-color);
-        background-color: var(--highlight-bg-color);
-        border-radius: 4px;
-        border: 1px solid var(--keybinding-border-color);
-        box-shadow: none;
-        white-space: nowrap;
-      }
+        .tip {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
 
-      .icon-wrap {
-        background-color: var(--highlight-bg-color);
-        padding: 2px;
-        color: var(--secondary-text-color);
-        font-size: 12px;
-        border-radius: 2px;
-        margin-right: 5px;
-        align-self: flex-start;
+            code {
+                padding: 0.1em 0.4em;
+                background-color: var(--highlight-bg-color);
+            }
 
-        svg {
-          position: relative;
-          top: 3px;
-          left: 1px;
-          height: 13px;
-          #arrow1,
-          #arrow2 {
-            fill: var(--main-text-color);
-          }
+            .keybinding-group {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                margin-left: 5px;
+                margin-right: 5px;
+                align-self: flex-start;
+
+                &:first-child {
+                    margin-left: 0;
+                }
+            }
+
+            .keybinding {
+                display: inline-block;
+                padding: 0.1em 0.4em;
+                margin: 0 0.1em;
+                font: var(--fixed-font);
+                font-size: 0.85em;
+                color: var(--keybinding-color);
+                background-color: var(--highlight-bg-color);
+                border-radius: 4px;
+                border: 1px solid var(--keybinding-border-color);
+                box-shadow: none;
+                white-space: nowrap;
+            }
+
+            .icon-wrap {
+                background-color: var(--highlight-bg-color);
+                padding: 2px;
+                color: var(--secondary-text-color);
+                font-size: 12px;
+                border-radius: 2px;
+                margin-right: 5px;
+                align-self: flex-start;
+
+                svg {
+                    position: relative;
+                    top: 3px;
+                    left: 1px;
+                    height: 13px;
+                    #arrow1,
+                    #arrow2 {
+                        fill: var(--main-text-color);
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
diff --git a/frontend/app/element/toggle.scss b/frontend/app/element/toggle.scss
index 3cf0fe87a..e66dbc43c 100644
--- a/frontend/app/element/toggle.scss
+++ b/frontend/app/element/toggle.scss
@@ -2,61 +2,61 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .check-toggle-wrapper {
-  user-select: none;
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+    user-select: none;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
 
-  .checkbox-toggle {
-    position: relative;
-    display: inline-block;
-    width: 32px;
-    height: 20px;
+    .checkbox-toggle {
+        position: relative;
+        display: inline-block;
+        width: 32px;
+        height: 20px;
 
-    input {
-      opacity: 0;
-      width: 0;
-      height: 0;
+        input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            content: "";
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: var(--toggle-bg-color);
+            transition: 0.5s;
+            border-radius: 33px;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 16px;
+            width: 16px;
+            left: 3px;
+            bottom: 2px;
+            background-color: var(--toggle-thumb-color);
+            transition: 0.5s;
+            border-radius: 50%;
+        }
+
+        input:checked + .slider {
+            background-color: var(--toggle-checked-bg-color);
+        }
+
+        input:checked + .slider:before {
+            transform: translateX(11px);
+        }
     }
 
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      content: "";
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: var(--toggle-bg-color);
-      transition: 0.5s;
-      border-radius: 33px;
+    label,
+    .toggle-label {
+        cursor: pointer;
+        padding: 0 5px;
     }
-
-    .slider:before {
-      position: absolute;
-      content: "";
-      height: 16px;
-      width: 16px;
-      left: 3px;
-      bottom: 2px;
-      background-color: var(--toggle-thumb-color);
-      transition: 0.5s;
-      border-radius: 50%;
-    }
-
-    input:checked + .slider {
-      background-color: var(--toggle-checked-bg-color);
-    }
-
-    input:checked + .slider:before {
-      transform: translateX(11px);
-    }
-  }
-
-  label,
-  .toggle-label {
-    cursor: pointer;
-    padding: 0 5px;
-  }
 }
diff --git a/frontend/app/element/typingindicator.scss b/frontend/app/element/typingindicator.scss
index 4d977bd9d..dae78ed8f 100644
--- a/frontend/app/element/typingindicator.scss
+++ b/frontend/app/element/typingindicator.scss
@@ -6,41 +6,41 @@ $dot-color: var(--success-color);
 $speed: 1.5s;
 
 .typing {
-  position: relative;
-  height: $dot-width;
-
-  span {
-    content: "";
-    animation: blink $speed infinite;
-    animation-fill-mode: both;
+    position: relative;
     height: $dot-width;
-    width: $dot-width;
-    background: $dot-color;
-    position: absolute;
-    left: 0;
-    top: 0;
-    border-radius: 50%;
 
-    &:nth-child(2) {
-      animation-delay: 0.2s;
-      margin-left: $dot-width * 1.5;
-    }
+    span {
+        content: "";
+        animation: blink $speed infinite;
+        animation-fill-mode: both;
+        height: $dot-width;
+        width: $dot-width;
+        background: $dot-color;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 50%;
 
-    &:nth-child(3) {
-      animation-delay: 0.4s;
-      margin-left: $dot-width * 3;
+        &:nth-child(2) {
+            animation-delay: 0.2s;
+            margin-left: $dot-width * 1.5;
+        }
+
+        &:nth-child(3) {
+            animation-delay: 0.4s;
+            margin-left: $dot-width * 3;
+        }
     }
-  }
 }
 
 @keyframes blink {
-  0% {
-    opacity: 0.1;
-  }
-  20% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.1;
-  }
+    0% {
+        opacity: 0.1;
+    }
+    20% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.1;
+    }
 }
diff --git a/frontend/app/element/windowdrag.scss b/frontend/app/element/windowdrag.scss
index 5b86487f6..795e7d645 100644
--- a/frontend/app/element/windowdrag.scss
+++ b/frontend/app/element/windowdrag.scss
@@ -2,6 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .window-drag {
-  -webkit-app-region: drag;
-  z-index: var(--zindex-window-drag);
+    -webkit-app-region: drag;
+    z-index: var(--zindex-window-drag);
 }
diff --git a/frontend/app/mixins.scss b/frontend/app/mixins.scss
index 4f733e858..9afb81817 100644
--- a/frontend/app/mixins.scss
+++ b/frontend/app/mixins.scss
@@ -2,267 +2,267 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @mixin ellipsis() {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 @mixin border-radius-mixin() {
-  &.border-radius-2 {
-    border-radius: 4px;
-  }
-  &.border-radius-3 {
-    border-radius: 3px;
-  }
-  &.border-radius-4 {
-    border-radius: 4px;
-  }
-  &.border-radius-5 {
-    border-radius: 5px;
-  }
-  &.border-radius-6 {
-    border-radius: 6px;
-  }
-  &.border-radius-7 {
-    border-radius: 7px;
-  }
-  &.border-radius-8 {
-    border-radius: 8px;
-  }
-  &.border-radius-9 {
-    border-radius: 9px;
-  }
-  &.border-radius-10 {
-    border-radius: 10px;
-  }
+    &.border-radius-2 {
+        border-radius: 4px;
+    }
+    &.border-radius-3 {
+        border-radius: 3px;
+    }
+    &.border-radius-4 {
+        border-radius: 4px;
+    }
+    &.border-radius-5 {
+        border-radius: 5px;
+    }
+    &.border-radius-6 {
+        border-radius: 6px;
+    }
+    &.border-radius-7 {
+        border-radius: 7px;
+    }
+    &.border-radius-8 {
+        border-radius: 8px;
+    }
+    &.border-radius-9 {
+        border-radius: 9px;
+    }
+    &.border-radius-10 {
+        border-radius: 10px;
+    }
 }
 
 @mixin vertical-padding-mixin() {
-  &.vertical-padding-0 {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-  &.vertical-padding-1 {
-    padding-top: 1px;
-    padding-bottom: 1px;
-  }
-  &.vertical-padding-2 {
-    padding-top: 2px;
-    padding-bottom: 2px;
-  }
-  &.vertical-padding-3 {
-    padding-top: 3px;
-    padding-bottom: 3px;
-  }
-  &.vertical-padding-4 {
-    padding-top: 4px;
-    padding-bottom: 4px;
-  }
-  &.vertical-padding-5 {
-    padding-top: 5px;
-    padding-bottom: 5px;
-  }
-  &.vertical-padding-6 {
-    padding-top: 6px;
-    padding-bottom: 6px;
-  }
-  &.vertical-padding-7 {
-    padding-top: 7px;
-    padding-bottom: 7px;
-  }
-  &.vertical-padding-8 {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
-  &.vertical-padding-9 {
-    padding-top: 9px;
-    padding-bottom: 9px;
-  }
-  &.vertical-padding-10 {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
+    &.vertical-padding-0 {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+    &.vertical-padding-1 {
+        padding-top: 1px;
+        padding-bottom: 1px;
+    }
+    &.vertical-padding-2 {
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+    &.vertical-padding-3 {
+        padding-top: 3px;
+        padding-bottom: 3px;
+    }
+    &.vertical-padding-4 {
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+    &.vertical-padding-5 {
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+    &.vertical-padding-6 {
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
+    &.vertical-padding-7 {
+        padding-top: 7px;
+        padding-bottom: 7px;
+    }
+    &.vertical-padding-8 {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+    &.vertical-padding-9 {
+        padding-top: 9px;
+        padding-bottom: 9px;
+    }
+    &.vertical-padding-10 {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
 }
 
 @mixin horizontal-padding-mixin() {
-  &.horizontal-padding-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-  &.horizontal-padding-1 {
-    padding-left: 1px;
-    padding-right: 1px;
-  }
-  &.horizontal-padding-2 {
-    padding-left: 2px;
-    padding-right: 2px;
-  }
-  &.horizontal-padding-3 {
-    padding-left: 3px;
-    padding-right: 3px;
-  }
-  &.horizontal-padding-4 {
-    padding-left: 4px;
-    padding-right: 4px;
-  }
-  &.horizontal-padding-5 {
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-  &.horizontal-padding-6 {
-    padding-left: 6px;
-    padding-right: 6px;
-  }
-  &.horizontal-padding-7 {
-    padding-left: 7px;
-    padding-right: 7px;
-  }
-  &.horizontal-padding-8 {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-  &.horizontal-padding-9 {
-    padding-left: 9px;
-    padding-right: 9px;
-  }
-  &.horizontal-padding-10 {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
+    &.horizontal-padding-0 {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+    &.horizontal-padding-1 {
+        padding-left: 1px;
+        padding-right: 1px;
+    }
+    &.horizontal-padding-2 {
+        padding-left: 2px;
+        padding-right: 2px;
+    }
+    &.horizontal-padding-3 {
+        padding-left: 3px;
+        padding-right: 3px;
+    }
+    &.horizontal-padding-4 {
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+    &.horizontal-padding-5 {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+    &.horizontal-padding-6 {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+    &.horizontal-padding-7 {
+        padding-left: 7px;
+        padding-right: 7px;
+    }
+    &.horizontal-padding-8 {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+    &.horizontal-padding-9 {
+        padding-left: 9px;
+        padding-right: 9px;
+    }
+    &.horizontal-padding-10 {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
 }
 
 @mixin font-size-mixin() {
-  &.font-size-10 {
-    font-size: 10px;
-  }
-  &.font-size-11 {
-    font-size: 11px;
-  }
-  &.font-size-12 {
-    font-size: 12px;
-  }
-  &.font-size-13 {
-    font-size: 13px;
-  }
-  &.font-size-14 {
-    font-size: 14px;
-  }
-  &.font-size-15 {
-    font-size: 15px;
-  }
-  &.font-size-16 {
-    font-size: 16px;
-  }
-  &.font-size-17 {
-    font-size: 17px;
-  }
-  &.font-size-18 {
-    font-size: 18px;
-  }
-  &.font-size-19 {
-    font-size: 19px;
-  }
-  &.font-size-20 {
-    font-size: 20px;
-  }
-  &.font-size-21 {
-    font-size: 21px;
-  }
-  &.font-size-22 {
-    font-size: 22px;
-  }
-  &.font-size-23 {
-    font-size: 23px;
-  }
-  &.font-size-24 {
-    font-size: 24px;
-  }
-  &.font-size-25 {
-    font-size: 25px;
-  }
-  &.font-size-26 {
-    font-size: 26px;
-  }
+    &.font-size-10 {
+        font-size: 10px;
+    }
+    &.font-size-11 {
+        font-size: 11px;
+    }
+    &.font-size-12 {
+        font-size: 12px;
+    }
+    &.font-size-13 {
+        font-size: 13px;
+    }
+    &.font-size-14 {
+        font-size: 14px;
+    }
+    &.font-size-15 {
+        font-size: 15px;
+    }
+    &.font-size-16 {
+        font-size: 16px;
+    }
+    &.font-size-17 {
+        font-size: 17px;
+    }
+    &.font-size-18 {
+        font-size: 18px;
+    }
+    &.font-size-19 {
+        font-size: 19px;
+    }
+    &.font-size-20 {
+        font-size: 20px;
+    }
+    &.font-size-21 {
+        font-size: 21px;
+    }
+    &.font-size-22 {
+        font-size: 22px;
+    }
+    &.font-size-23 {
+        font-size: 23px;
+    }
+    &.font-size-24 {
+        font-size: 24px;
+    }
+    &.font-size-25 {
+        font-size: 25px;
+    }
+    &.font-size-26 {
+        font-size: 26px;
+    }
 }
 
 @mixin font-weight-mixin() {
-  &.font-weight-100 {
-    font-weight: 100;
-  }
-  &.font-weight-200 {
-    font-weight: 200;
-  }
-  &.font-weight-300 {
-    font-weight: 300;
-  }
-  &.font-weight-400 {
-    font-weight: 400;
-  }
-  &.font-weight-500 {
-    font-weight: 500;
-  }
-  &.font-weight-600 {
-    font-weight: 600;
-  }
-  &.font-weight-700 {
-    font-weight: 700;
-  }
+    &.font-weight-100 {
+        font-weight: 100;
+    }
+    &.font-weight-200 {
+        font-weight: 200;
+    }
+    &.font-weight-300 {
+        font-weight: 300;
+    }
+    &.font-weight-400 {
+        font-weight: 400;
+    }
+    &.font-weight-500 {
+        font-weight: 500;
+    }
+    &.font-weight-600 {
+        font-weight: 600;
+    }
+    &.font-weight-700 {
+        font-weight: 700;
+    }
 }
 
 @mixin avatar-dims-mixin() {
-  &.size-xs {
-    width: 20px;
-    height: 20px;
-    font-size: 7px; // 18px * (20 / 50)
+    &.size-xs {
+        width: 20px;
+        height: 20px;
+        font-size: 7px; // 18px * (20 / 50)
 
-    .status-indicator {
-      width: 5px; // scaled indicator size
-      height: 5px;
+        .status-indicator {
+            width: 5px; // scaled indicator size
+            height: 5px;
+        }
     }
-  }
 
-  &.size-sm {
-    width: 30px;
-    height: 30px;
-    font-size: 11px; // 18px * (30 / 50)
+    &.size-sm {
+        width: 30px;
+        height: 30px;
+        font-size: 11px; // 18px * (30 / 50)
 
-    .status-indicator {
-      width: 7px;
-      height: 7px;
+        .status-indicator {
+            width: 7px;
+            height: 7px;
+        }
     }
-  }
 
-  &.size-md {
-    width: 40px;
-    height: 40px;
-    font-size: 14px; // 18px * (40 / 50)
+    &.size-md {
+        width: 40px;
+        height: 40px;
+        font-size: 14px; // 18px * (40 / 50)
 
-    .status-indicator {
-      width: 9px;
-      height: 9px;
+        .status-indicator {
+            width: 9px;
+            height: 9px;
+        }
     }
-  }
 
-  &.size-lg {
-    width: 45px;
-    height: 45px;
-    font-size: 16px; // 18px * (45 / 50)
+    &.size-lg {
+        width: 45px;
+        height: 45px;
+        font-size: 16px; // 18px * (45 / 50)
 
-    .status-indicator {
-      width: 10px;
-      height: 10px;
+        .status-indicator {
+            width: 10px;
+            height: 10px;
+        }
     }
-  }
 
-  &.size-xl {
-    width: 50px;
-    height: 50px;
-    font-size: 18px; // base size
+    &.size-xl {
+        width: 50px;
+        height: 50px;
+        font-size: 18px; // base size
 
-    .status-indicator {
-      width: 12px;
-      height: 12px;
+        .status-indicator {
+            width: 12px;
+            height: 12px;
+        }
     }
-  }
 }
diff --git a/frontend/app/modals/about.scss b/frontend/app/modals/about.scss
index e6a6404d1..9d6db867d 100644
--- a/frontend/app/modals/about.scss
+++ b/frontend/app/modals/about.scss
@@ -2,65 +2,65 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .about-modal {
-  padding-bottom: 34px;
+    padding-bottom: 34px;
 
-  .content-wrapper .modal-content {
-    margin-bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0px 0px;
-    gap: 24px;
-
-    .section-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 26px;
-      width: 100%;
-    }
-
-    .section {
-      align-items: center;
-      gap: 16px;
-      align-self: stretch;
-      width: 100%;
-      text-align: center;
-
-      &.logo-section {
+    .content-wrapper .modal-content {
+        margin-bottom: 0;
         display: flex;
-        align-items: center;
-        justify-content: center;
         flex-direction: column;
-        text-align: center;
+        align-items: flex-start;
+        padding: 0px 0px;
+        gap: 24px;
 
-        .app-name {
-          font-size: 25px;
+        .section-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 26px;
+            width: 100%;
         }
 
-        .text-standard {
-          line-height: 20px;
+        .section {
+            align-items: center;
+            gap: 16px;
+            align-self: stretch;
+            width: 100%;
+            text-align: center;
+
+            &.logo-section {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                text-align: center;
+
+                .app-name {
+                    font-size: 25px;
+                }
+
+                .text-standard {
+                    line-height: 20px;
+                }
+            }
+        }
+
+        .section.links {
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+
+            .button {
+                display: flex;
+                align-items: center;
+
+                .icon-left {
+                    margin-right: 5px;
+                }
+
+                i {
+                    font-size: 16px;
+                    margin-right: 5px;
+                }
+            }
         }
-      }
     }
-
-    .section.links {
-      display: flex;
-      align-items: flex-start;
-      gap: 10px;
-
-      .button {
-        display: flex;
-        align-items: center;
-
-        .icon-left {
-          margin-right: 5px;
-        }
-
-        i {
-          font-size: 16px;
-          margin-right: 5px;
-        }
-      }
-    }
-  }
 }
diff --git a/frontend/app/modals/messagemodal.scss b/frontend/app/modals/messagemodal.scss
index 2c80ae61d..41113f25b 100644
--- a/frontend/app/modals/messagemodal.scss
+++ b/frontend/app/modals/messagemodal.scss
@@ -2,5 +2,5 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .message-modal {
-  min-width: 400px;
+    min-width: 400px;
 }
diff --git a/frontend/app/modals/modal.scss b/frontend/app/modals/modal.scss
index 47fe82525..46ebe01a6 100644
--- a/frontend/app/modals/modal.scss
+++ b/frontend/app/modals/modal.scss
@@ -2,71 +2,71 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .modal-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: var(--zindex-modal-wrapper);
-
-  .modal-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(21, 23, 21, 0.7);
-    z-index: var(--zindex-modal-backdrop);
-  }
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--zindex-modal-wrapper);
+
+    .modal-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(21, 23, 21, 0.7);
+        z-index: var(--zindex-modal-backdrop);
+    }
 }
 
 .modal {
-  position: relative;
-  z-index: var(--zindex-modal);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 24px 16px 16px;
-  border-radius: 8px;
-  border: 0.5px solid var(--modal-border-color);
-  background: var(--modal-bg-color);
-  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
-
-  .modal-close-btn {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    padding: 8px 12px;
-
-    i {
-      font-size: 18px;
-    }
-  }
-
-  .content-wrapper {
+    position: relative;
+    z-index: var(--zindex-modal);
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    width: 100%;
+    align-items: flex-start;
+    padding: 24px 16px 16px;
+    border-radius: 8px;
+    border: 0.5px solid var(--modal-border-color);
+    background: var(--modal-bg-color);
+    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
 
-    .modal-content {
-      width: 100%;
-      padding: 0px 20px;
+    .modal-close-btn {
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        padding: 8px 12px;
+
+        i {
+            font-size: 18px;
+        }
     }
-  }
 
-  .modal-footer {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-    padding-top: 16px;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    .content-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
 
-    .button:last-child {
-      margin-left: 8px;
+        .modal-content {
+            width: 100%;
+            padding: 0px 20px;
+        }
+    }
+
+    .modal-footer {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+        padding-top: 16px;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+        .button:last-child {
+            margin-left: 8px;
+        }
     }
-  }
 }
diff --git a/frontend/app/modals/tos.scss b/frontend/app/modals/tos.scss
index 012439557..72d8015af 100644
--- a/frontend/app/modals/tos.scss
+++ b/frontend/app/modals/tos.scss
@@ -2,245 +2,245 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tos-modal {
-  width: 560px;
-  border-radius: 10px;
-  padding: 0;
+    width: 560px;
+    border-radius: 10px;
+    padding: 0;
 
-  .modal-inner {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    padding: 30px;
-    width: 100%;
-
-    header.tos-header {
-      flex-direction: column;
-      gap: 8px;
-      border-bottom: none;
-      padding: 0;
-      margin-bottom: 36px;
-      width: 100%;
-
-      .logo {
-        margin-bottom: 10px;
+    .modal-inner {
         display: flex;
-        justify-content: center;
-      }
-
-      .modal-title {
-        text-align: center;
-        font-size: 25px;
-        font-weight: 400;
-        color: var(--main-text-color);
-      }
-
-      .modal-subtitle {
-        color: var(--main-text-color);
-        text-align: center;
-
-        font-style: normal;
-        font-weight: 300;
-        line-height: 20px;
-      }
-    }
-
-    .tos-content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 32px;
-      width: 100%;
-      margin-bottom: 0;
-      margin-bottom: 20px;
-
-      .check-toggle-wrapper .toggle-label {
-        color: var(--secondary-text-color);
-      }
-
-      .tips-wrapper {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
+        flex-direction: column;
+        overflow-y: auto;
+        padding: 30px;
         width: 100%;
 
-        .tips-section {
-          display: flex;
-          flex-direction: column;
-          flex-grow: 1;
-          gap: 5px;
-
-          .tip-section-header {
-            font-weight: bold;
-            margin-bottom: 5px;
-            margin-top: 10px;
-
-            &:first-child {
-              margin-top: 0;
-            }
-          }
-
-          .tip {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .keybinding2 {
-              font: var(--fixed-font);
-              background-color: var(--highlight-bg-color);
-              color: var(--main-text-color);
-              padding: 2px 8px;
-              border-radius: 4px;
-            }
-
-            .keybinding-group {
-              display: flex;
-              flex-direction: row;
-              align-items: center;
-              margin-left: 5px;
-              margin-right: 5px;
-
-              &:first-child {
-                margin-left: 0;
-              }
-            }
-
-            .keybinding {
-              display: inline-block;
-              padding: 0.1em 0.4em;
-              margin: 0 0.1em;
-              font-family: "SF Pro Text", "Segoe UI", sans-serif;
-              font-size: 0.85em;
-              color: #e0e0e0;
-              background-color: #333;
-              border-radius: 4px;
-              border: 1px solid #444;
-              box-shadow: none;
-            }
-
-            .keybinding3 {
-              color: black;
-              display: inline-block;
-              padding: 0.2em 0.4em;
-              min-width: 24px;
-              height: 22px;
-              margin: 0 0.1em;
-              font-family: "SF Pro Text", "Segoe UI", sans-serif;
-              font-size: 0.9em;
-              border: 1px solid #aaa;
-              border-radius: 4px;
-              background-color: #ddd;
-              color: var(--invert-text-color);
-              box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
-              text-align: center;
-            }
-
-            .icon-wrap {
-              background-color: var(--highlight-bg-color);
-              padding: 2px;
-              color: var(--secondary-text-color);
-              font-size: 12px;
-              border-radius: 2px;
-              margin-right: 5px;
-
-              svg {
-                position: relative;
-                top: 3px;
-                left: 1px;
-                height: 13px;
-                #arrow1,
-                #arrow2 {
-                  fill: var(--main-text-color);
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .content-section {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        gap: 18px;
-
-        .icon-wrapper {
-          .icon {
-            font-size: 32px;
-            color: rgba(255, 255, 255, 0.5);
-          }
-
-          .fa-people-group {
-            font-size: 25px;
-          }
-        }
-
-        .content-section-inner {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 4px;
-          flex: 1 0 0;
-
-          .content-section-title {
-            color: var(--main-text-color);
-            font-style: normal;
-            line-height: 18px;
-            font-size: 16px;
-            margin-bottom: 5px;
-          }
-
-          .content-section-text {
-            color: var(--secondary-text-color);
-            font-style: normal;
-            line-height: 20px;
-
-            b {
-              color: var(--main-text-color);
-            }
-          }
-
-          .content-section-field {
-            display: flex;
-            align-items: center;
+        header.tos-header {
+            flex-direction: column;
             gap: 8px;
-          }
+            border-bottom: none;
+            padding: 0;
+            margin-bottom: 36px;
+            width: 100%;
 
-          .check-toggle-wrapper {
-            margin-top: 5px;
-
-            label {
-              font-size: 13px;
+            .logo {
+                margin-bottom: 10px;
+                display: flex;
+                justify-content: center;
+            }
+
+            .modal-title {
+                text-align: center;
+                font-size: 25px;
+                font-weight: 400;
+                color: var(--main-text-color);
+            }
+
+            .modal-subtitle {
+                color: var(--main-text-color);
+                text-align: center;
+
+                font-style: normal;
+                font-weight: 300;
+                line-height: 20px;
+            }
+        }
+
+        .tos-content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 32px;
+            width: 100%;
+            margin-bottom: 0;
+            margin-bottom: 20px;
+
+            .check-toggle-wrapper .toggle-label {
+                color: var(--secondary-text-color);
+            }
+
+            .tips-wrapper {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                width: 100%;
+
+                .tips-section {
+                    display: flex;
+                    flex-direction: column;
+                    flex-grow: 1;
+                    gap: 5px;
+
+                    .tip-section-header {
+                        font-weight: bold;
+                        margin-bottom: 5px;
+                        margin-top: 10px;
+
+                        &:first-child {
+                            margin-top: 0;
+                        }
+                    }
+
+                    .tip {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+
+                        .keybinding2 {
+                            font: var(--fixed-font);
+                            background-color: var(--highlight-bg-color);
+                            color: var(--main-text-color);
+                            padding: 2px 8px;
+                            border-radius: 4px;
+                        }
+
+                        .keybinding-group {
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+                            margin-left: 5px;
+                            margin-right: 5px;
+
+                            &:first-child {
+                                margin-left: 0;
+                            }
+                        }
+
+                        .keybinding {
+                            display: inline-block;
+                            padding: 0.1em 0.4em;
+                            margin: 0 0.1em;
+                            font-family: "SF Pro Text", "Segoe UI", sans-serif;
+                            font-size: 0.85em;
+                            color: #e0e0e0;
+                            background-color: #333;
+                            border-radius: 4px;
+                            border: 1px solid #444;
+                            box-shadow: none;
+                        }
+
+                        .keybinding3 {
+                            color: black;
+                            display: inline-block;
+                            padding: 0.2em 0.4em;
+                            min-width: 24px;
+                            height: 22px;
+                            margin: 0 0.1em;
+                            font-family: "SF Pro Text", "Segoe UI", sans-serif;
+                            font-size: 0.9em;
+                            border: 1px solid #aaa;
+                            border-radius: 4px;
+                            background-color: #ddd;
+                            color: var(--invert-text-color);
+                            box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
+                            text-align: center;
+                        }
+
+                        .icon-wrap {
+                            background-color: var(--highlight-bg-color);
+                            padding: 2px;
+                            color: var(--secondary-text-color);
+                            font-size: 12px;
+                            border-radius: 2px;
+                            margin-right: 5px;
+
+                            svg {
+                                position: relative;
+                                top: 3px;
+                                left: 1px;
+                                height: 13px;
+                                #arrow1,
+                                #arrow2 {
+                                    fill: var(--main-text-color);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .content-section {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                gap: 18px;
+
+                .icon-wrapper {
+                    .icon {
+                        font-size: 32px;
+                        color: rgba(255, 255, 255, 0.5);
+                    }
+
+                    .fa-people-group {
+                        font-size: 25px;
+                    }
+                }
+
+                .content-section-inner {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    gap: 4px;
+                    flex: 1 0 0;
+
+                    .content-section-title {
+                        color: var(--main-text-color);
+                        font-style: normal;
+                        line-height: 18px;
+                        font-size: 16px;
+                        margin-bottom: 5px;
+                    }
+
+                    .content-section-text {
+                        color: var(--secondary-text-color);
+                        font-style: normal;
+                        line-height: 20px;
+
+                        b {
+                            color: var(--main-text-color);
+                        }
+                    }
+
+                    .content-section-field {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                    }
+
+                    .check-toggle-wrapper {
+                        margin-top: 5px;
+
+                        label {
+                            font-size: 13px;
+                        }
+                    }
+                }
+            }
+        }
+
+        footer {
+            .content-section-text {
+                text-align: center;
+                color: rgba(255, 255, 255, 0.7);
+                font-size: 11px;
+            }
+
+            .button-wrapper {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+
+                button {
+                    font-size: 14px;
+                }
+
+                button:not(:first-child) {
+                    margin-left: 10px;
+                }
+
+                button.disabled-button {
+                    cursor: default;
+                }
             }
-          }
         }
-      }
     }
-
-    footer {
-      .content-section-text {
-        text-align: center;
-        color: rgba(255, 255, 255, 0.7);
-        font-size: 11px;
-      }
-
-      .button-wrapper {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-
-        button {
-          font-size: 14px;
-        }
-
-        button:not(:first-child) {
-          margin-left: 10px;
-        }
-
-        button.disabled-button {
-          cursor: default;
-        }
-      }
-    }
-  }
 }
diff --git a/frontend/app/modals/typeaheadmodal.scss b/frontend/app/modals/typeaheadmodal.scss
index 055915682..a6665d058 100644
--- a/frontend/app/modals/typeaheadmodal.scss
+++ b/frontend/app/modals/typeaheadmodal.scss
@@ -4,116 +4,116 @@
 @use "../mixins.scss";
 
 .type-ahead-modal-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: transparent;
-  z-index: var(--zindex-typeahead-modal-backdrop);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent;
+    z-index: var(--zindex-typeahead-modal-backdrop);
 }
 
 .type-ahead-modal {
-  position: absolute;
-  z-index: var(--zindex-typeahead-modal);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  border-radius: 6px;
-  border: 1px solid var(--modal-border-color);
-  background: var(--modal-bg-color);
-  box-shadow: 0px 13px 16px 0px rgba(0, 0, 0, 0.4);
-  padding: 6px;
-  flex-direction: column;
-
-  .label {
-    opacity: 0.5;
-    font-size: 13px;
-    white-space: nowrap;
-  }
-
-  .input {
-    border: none;
-    border-bottom: none;
-    height: 24px;
-    border-radius: 0;
-
-    input {
-      width: 100%;
-      flex-shrink: 0;
-      padding: 4px 6px;
-      height: 24px;
-    }
-
-    .input-decoration.end-position {
-      margin: 6px;
-
-      i {
-        opacity: 0.3;
-      }
-    }
-  }
-
-  &.has-suggestions {
-    .input {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    }
-  }
-
-  .suggestions-wrapper {
-    width: 100%;
-    overflow: hidden;
+    position: absolute;
+    z-index: var(--zindex-typeahead-modal);
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    align-items: flex-start;
+    border-radius: 6px;
+    border: 1px solid var(--modal-border-color);
+    background: var(--modal-bg-color);
+    box-shadow: 0px 13px 16px 0px rgba(0, 0, 0, 0.4);
+    padding: 6px;
+    flex-direction: column;
 
-    .suggestion-header {
-      font-size: 11px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 12px;
-      opacity: 0.7;
-      letter-spacing: 0.11px;
-      padding: 4px 0px 0px 4px;
+    .label {
+        opacity: 0.5;
+        font-size: 13px;
+        white-space: nowrap;
     }
 
-    .suggestion-item {
-      width: 100%;
-      cursor: pointer;
-      display: flex;
-      padding: 6px 8px;
-      align-items: center;
-      gap: 8px;
-      align-self: stretch;
-      border-radius: 4px;
+    .input {
+        border: none;
+        border-bottom: none;
+        height: 24px;
+        border-radius: 0;
 
-      &.selected {
-        background-color: rgb(from var(--accent-color) r g b / 0.5);
-        color: var(--main-text-color);
-      }
-
-      &:hover:not(.selected) {
-        background-color: var(--highlight-bg-color);
-      }
-
-      .typeahead-item-name {
-        @include mixins.ellipsis();
-        display: flex;
-        gap: 8px;
-        font-size: 11px;
-        font-weight: 400;
-        line-height: 14px;
-
-        i {
-          display: inline-block;
-          position: relative;
-          top: 2px;
+        input {
+            width: 100%;
+            flex-shrink: 0;
+            padding: 4px 6px;
+            height: 24px;
         }
-      }
 
-      .typeahead-current-checkbox {
-        margin-left: auto;
-      }
+        .input-decoration.end-position {
+            margin: 6px;
+
+            i {
+                opacity: 0.3;
+            }
+        }
+    }
+
+    &.has-suggestions {
+        .input {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        }
+    }
+
+    .suggestions-wrapper {
+        width: 100%;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        .suggestion-header {
+            font-size: 11px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 12px;
+            opacity: 0.7;
+            letter-spacing: 0.11px;
+            padding: 4px 0px 0px 4px;
+        }
+
+        .suggestion-item {
+            width: 100%;
+            cursor: pointer;
+            display: flex;
+            padding: 6px 8px;
+            align-items: center;
+            gap: 8px;
+            align-self: stretch;
+            border-radius: 4px;
+
+            &.selected {
+                background-color: rgb(from var(--accent-color) r g b / 0.5);
+                color: var(--main-text-color);
+            }
+
+            &:hover:not(.selected) {
+                background-color: var(--highlight-bg-color);
+            }
+
+            .typeahead-item-name {
+                @include mixins.ellipsis();
+                display: flex;
+                gap: 8px;
+                font-size: 11px;
+                font-weight: 400;
+                line-height: 14px;
+
+                i {
+                    display: inline-block;
+                    position: relative;
+                    top: 2px;
+                }
+            }
+
+            .typeahead-current-checkbox {
+                margin-left: auto;
+            }
+        }
     }
-  }
 }
diff --git a/frontend/app/modals/userinputmodal.scss b/frontend/app/modals/userinputmodal.scss
index 12e6617d6..6ec38c048 100644
--- a/frontend/app/modals/userinputmodal.scss
+++ b/frontend/app/modals/userinputmodal.scss
@@ -2,60 +2,60 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .userinput-header {
-  font-weight: bold;
-  color: var(--main-text-color);
-  padding-bottom: 10px;
+    font-weight: bold;
+    color: var(--main-text-color);
+    padding-bottom: 10px;
 }
 
 .userinput-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 1rem;
-  margin: 0 1rem 1rem 1rem;
-
-  font: var(--fixed-font);
-  color: var(--main-text-color);
-
-  .userinput-markdown {
-    color: inherit;
-  }
-
-  .userinput-text {
-  }
-
-  .userinput-inputbox {
-    resize: none;
-    background-color: var(--panel-bg-color);
-    border-radius: 6px;
-    margin: 0;
-    border: var(--border-color);
-    padding: 5px 0 5px 16px;
-    min-height: 30px;
-    color: inherit;
-
-    &:hover {
-      cursor: text;
-    }
-
-    &:focus {
-      outline-color: var(--accent-color);
-    }
-  }
-
-  .userinput-checkbox-container {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    justify-content: space-between;
+    gap: 1rem;
+    margin: 0 1rem 1rem 1rem;
 
-    .userinput-checkbox-row {
-      display: flex;
-      align-items: center;
-      gap: 6px;
+    font: var(--fixed-font);
+    color: var(--main-text-color);
 
-      .userinput-checkbox {
-        accent-color: var(--accent-color);
-      }
+    .userinput-markdown {
+        color: inherit;
+    }
+
+    .userinput-text {
+    }
+
+    .userinput-inputbox {
+        resize: none;
+        background-color: var(--panel-bg-color);
+        border-radius: 6px;
+        margin: 0;
+        border: var(--border-color);
+        padding: 5px 0 5px 16px;
+        min-height: 30px;
+        color: inherit;
+
+        &:hover {
+            cursor: text;
+        }
+
+        &:focus {
+            outline-color: var(--accent-color);
+        }
+    }
+
+    .userinput-checkbox-container {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+
+        .userinput-checkbox-row {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+
+            .userinput-checkbox {
+                accent-color: var(--accent-color);
+            }
+        }
     }
-  }
 }
diff --git a/frontend/app/notification/notificationbubbles.scss b/frontend/app/notification/notificationbubbles.scss
index d4474619b..345fa40e8 100644
--- a/frontend/app/notification/notificationbubbles.scss
+++ b/frontend/app/notification/notificationbubbles.scss
@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .notification-bubbles {
-  display: flex;
-  width: 380px;
-  flex-direction: column;
-  align-items: flex-start;
-  row-gap: 8px;
+    display: flex;
+    width: 380px;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 8px;
 }
diff --git a/frontend/app/notification/notificationitem.scss b/frontend/app/notification/notificationitem.scss
index 646fe90f3..a64bf7beb 100644
--- a/frontend/app/notification/notificationitem.scss
+++ b/frontend/app/notification/notificationitem.scss
@@ -2,118 +2,118 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .notification {
-  .notification-title {
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 18px;
-    margin-bottom: 3px;
+    .notification-title {
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 18px;
+        margin-bottom: 3px;
 
-    &.green {
-      color: var(--success-color);
+        &.green {
+            color: var(--success-color);
+        }
+
+        &.red {
+            color: var(--error-color);
+        }
+
+        &.yellow {
+            color: var(--warning-color);
+        }
     }
 
-    &.red {
-      color: var(--error-color);
+    .notification-message {
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 18px;
+        opacity: 0.7;
     }
 
-    &.yellow {
-      color: var(--warning-color);
-    }
-  }
+    .notification-actions {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        margin-top: 10px;
 
-  .notification-message {
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18px;
-    opacity: 0.7;
-  }
-
-  .notification-actions {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    margin-top: 10px;
-
-    i {
-      margin-left: 3px;
-      font-size: 11px;
-    }
-  }
-
-  .close-btn {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-  }
-
-  .lock-btn {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    padding: 10px 8px;
-    font-size: 11px;
-    color: rgb(from var(--main-text-color) r g b / 0.5);
-  }
-
-  .notification {
-    width: 100%;
-    color: var(--main-text-color);
-    padding: 12px 10px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  .notification-bubble {
-    position: relative;
-    display: flex;
-    width: 380px;
-    padding: 16px 24px 16px 16px;
-    align-items: flex-start;
-    gap: 12px;
-    border-radius: 8px;
-    border: 0.5px solid rgba(255, 255, 255, 0.12);
-    background: #232323;
-    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
-  }
-
-  .notification-inner {
-    display: flex;
-    align-items: flex-start;
-    column-gap: 6px;
-
-    .notification-icon {
-      margin-right: 5px;
-      margin-top: 1px;
-
-      i {
-        font-size: 16px;
-      }
-
-      i.green {
-        color: var(--success-color);
-      }
-
-      i.red {
-        color: var(--error-color);
-      }
-
-      i.yellow {
-        color: var(--warning-color);
-      }
+        i {
+            margin-left: 3px;
+            font-size: 11px;
+        }
     }
 
-    .notification-timestamp {
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 18px;
-      opacity: 0.5;
-      margin-bottom: 7px;
+    .close-btn {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+    }
+
+    .lock-btn {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        padding: 10px 8px;
+        font-size: 11px;
+        color: rgb(from var(--main-text-color) r g b / 0.5);
+    }
+
+    .notification {
+        width: 100%;
+        color: var(--main-text-color);
+        padding: 12px 10px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .notification-bubble {
+        position: relative;
+        display: flex;
+        width: 380px;
+        padding: 16px 24px 16px 16px;
+        align-items: flex-start;
+        gap: 12px;
+        border-radius: 8px;
+        border: 0.5px solid rgba(255, 255, 255, 0.12);
+        background: #232323;
+        box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
+    }
+
+    .notification-inner {
+        display: flex;
+        align-items: flex-start;
+        column-gap: 6px;
+
+        .notification-icon {
+            margin-right: 5px;
+            margin-top: 1px;
+
+            i {
+                font-size: 16px;
+            }
+
+            i.green {
+                color: var(--success-color);
+            }
+
+            i.red {
+                color: var(--error-color);
+            }
+
+            i.yellow {
+                color: var(--warning-color);
+            }
+        }
+
+        .notification-timestamp {
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 18px;
+            opacity: 0.5;
+            margin-bottom: 7px;
+        }
+    }
+    &.hovered {
+        background: #292929;
     }
-  }
-  &.hovered {
-    background: #292929;
-  }
 }
diff --git a/frontend/app/notification/notificationpopover.scss b/frontend/app/notification/notificationpopover.scss
index eed18b1ce..6a3b983f0 100644
--- a/frontend/app/notification/notificationpopover.scss
+++ b/frontend/app/notification/notificationpopover.scss
@@ -2,63 +2,63 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .notification-popover {
-  padding: 8px 2px 8px 0px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  button {
-    width: 27px;
-    height: 26px;
+    padding: 8px 2px 8px 0px;
     display: flex;
+    align-items: center;
     justify-content: center;
 
-    i {
-      font-size: 17px;
+    button {
+        width: 27px;
+        height: 26px;
+        display: flex;
+        justify-content: center;
+
+        i {
+            font-size: 17px;
+        }
     }
-  }
 }
 
 .notification-content {
-  display: flex;
-  width: 380px;
-  padding: 10px 0 0;
-  flex-direction: column;
-  align-items: flex-start;
-  column-gap: 8px;
-  border-radius: 8px;
-  border: 0.5px solid rgba(255, 255, 255, 0.12);
-  background: #232323;
-  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
-
-  .divider {
-    background: rgba(255, 255, 255, 0.08);
-    height: 1px;
-    width: 100%;
-  }
-
-  .header {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 0 10px 8px 10px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    width: 380px;
+    padding: 10px 0 0;
+    flex-direction: column;
+    align-items: flex-start;
+    column-gap: 8px;
+    border-radius: 8px;
+    border: 0.5px solid rgba(255, 255, 255, 0.12);
+    background: #232323;
+    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
 
-    span {
-      color: var(--main-text-color);
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 16px;
+    .divider {
+        background: rgba(255, 255, 255, 0.08);
+        height: 1px;
+        width: 100%;
     }
-  }
 
-  .close-all-btn {
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px;
-    color: rgba(255, 255, 255, 0.4);
-  }
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding: 0 10px 8px 10px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+
+        span {
+            color: var(--main-text-color);
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 16px;
+        }
+    }
+
+    .close-all-btn {
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+        color: rgba(255, 255, 255, 0.4);
+    }
 }
diff --git a/frontend/app/reset.scss b/frontend/app/reset.scss
index facde8776..aa0063590 100644
--- a/frontend/app/reset.scss
+++ b/frontend/app/reset.scss
@@ -4,16 +4,16 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 * {
-  margin: 0;
+    margin: 0;
 }
 
 body {
-  line-height: 1.2;
-  -webkit-font-smoothing: antialiased;
+    line-height: 1.2;
+    -webkit-font-smoothing: antialiased;
 }
 
 img,
@@ -21,12 +21,12 @@ picture,
 video,
 canvas,
 svg {
-  display: block;
+    display: block;
 }
 
 input,
 button,
 textarea,
 select {
-  font: inherit;
+    font: inherit;
 }
diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss
index 0ecdc7052..80358e264 100644
--- a/frontend/app/tab/tab.scss
+++ b/frontend/app/tab/tab.scss
@@ -2,135 +2,135 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tab {
-  position: absolute;
-  width: 130px;
-  height: calc(100% - 1px);
-  padding: 6px 0px 0px;
-  box-sizing: border-box;
-  font-weight: bold;
-  color: var(--secondary-text-color);
-  opacity: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &::after {
-    content: "";
     position: absolute;
-    left: 0;
-    width: 1px;
-    height: 14px;
-    border-right: 1px solid rgb(from var(--main-text-color) r g b / 0.2);
-  }
-
-  .tab-inner {
-    position: relative;
-    width: calc(100% - 6px);
-    height: 100%;
-    white-space: nowrap;
-    border-radius: 6px;
-  }
-
-  &.animate {
-    transition:
-      transform 0.3s ease,
-      background-color 0.3s ease-in-out;
-  }
-
-  &.active {
-    .tab-inner {
-      border-color: transparent;
-      border-radius: 6px;
-      background: rgb(from var(--main-text-color) r g b / 0.07);
-    }
-
-    .name {
-      color: var(--main-text-color);
-    }
-
-    & + .tab::after,
-    &::after {
-      content: none;
-    }
-  }
-
-  &:first-child::after {
-    content: none;
-  }
-
-  .name {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-    user-select: none;
-    z-index: var(--zindex-tab-name);
-    font-size: 11px;
-    font-weight: 500;
-    text-shadow: 0px 0px 4px rgb(from var(--main-bg-color) r g b / 0.25);
-    overflow: hidden;
-    width: calc(100% - 10px);
-    text-overflow: ellipsis;
-    text-align: center;
-
-    &.focused {
-      outline: none;
-      border: 1px solid rgb(from var(--main-text-color) r g b / 0.179);
-      padding: 2px 6px;
-      border-radius: 2px;
-    }
-  }
-
-  .button {
-    position: absolute;
-    top: 50%;
-    right: 4px;
-    transform: translate3d(0, -50%, 0);
-    width: 20px;
-    height: 20px;
+    width: 130px;
+    height: calc(100% - 1px);
+    padding: 6px 0px 0px;
+    box-sizing: border-box;
+    font-weight: bold;
+    color: var(--secondary-text-color);
+    opacity: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    cursor: pointer;
-    z-index: var(--zindex-tab-name);
-    padding: 1px 2px;
-    transition: none !important;
-  }
 
-  .close {
-    visibility: hidden;
-  }
+    &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        width: 1px;
+        height: 14px;
+        border-right: 1px solid rgb(from var(--main-text-color) r g b / 0.2);
+    }
+
+    .tab-inner {
+        position: relative;
+        width: calc(100% - 6px);
+        height: 100%;
+        white-space: nowrap;
+        border-radius: 6px;
+    }
+
+    &.animate {
+        transition:
+            transform 0.3s ease,
+            background-color 0.3s ease-in-out;
+    }
+
+    &.active {
+        .tab-inner {
+            border-color: transparent;
+            border-radius: 6px;
+            background: rgb(from var(--main-text-color) r g b / 0.07);
+        }
+
+        .name {
+            color: var(--main-text-color);
+        }
+
+        & + .tab::after,
+        &::after {
+            content: none;
+        }
+    }
+
+    &:first-child::after {
+        content: none;
+    }
+
+    .name {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        user-select: none;
+        z-index: var(--zindex-tab-name);
+        font-size: 11px;
+        font-weight: 500;
+        text-shadow: 0px 0px 4px rgb(from var(--main-bg-color) r g b / 0.25);
+        overflow: hidden;
+        width: calc(100% - 10px);
+        text-overflow: ellipsis;
+        text-align: center;
+
+        &.focused {
+            outline: none;
+            border: 1px solid rgb(from var(--main-text-color) r g b / 0.179);
+            padding: 2px 6px;
+            border-radius: 2px;
+        }
+    }
+
+    .button {
+        position: absolute;
+        top: 50%;
+        right: 4px;
+        transform: translate3d(0, -50%, 0);
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: var(--zindex-tab-name);
+        padding: 1px 2px;
+        transition: none !important;
+    }
+
+    .close {
+        visibility: hidden;
+    }
 }
 
 body:not(.nohover) .tab:hover {
-  & + .tab::after,
-  &::after {
-    content: none;
-  }
-
-  .tab-inner {
-    border-color: transparent;
-    background: rgb(from var(--main-text-color) r g b / 0.07);
-  }
-  .close {
-    visibility: visible;
-    &:hover {
-      color: var(--main-text-color);
+    & + .tab::after,
+    &::after {
+        content: none;
+    }
+
+    .tab-inner {
+        border-color: transparent;
+        background: rgb(from var(--main-text-color) r g b / 0.07);
+    }
+    .close {
+        visibility: visible;
+        &:hover {
+            color: var(--main-text-color);
+        }
     }
-  }
 }
 
 @keyframes expandWidthAndFadeIn {
-  from {
-    width: var(--initial-tab-width);
-    opacity: 0;
-  }
-  to {
-    width: var(--final-tab-width);
-    opacity: 1;
-  }
+    from {
+        width: var(--initial-tab-width);
+        opacity: 0;
+    }
+    to {
+        width: var(--final-tab-width);
+        opacity: 1;
+    }
 }
 
 .tab.new-tab {
-  animation: expandWidthAndFadeIn 0.1s forwards;
+    animation: expandWidthAndFadeIn 0.1s forwards;
 }
diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss
index 3ae29cfea..e93a843b2 100644
--- a/frontend/app/tab/tabbar.scss
+++ b/frontend/app/tab/tabbar.scss
@@ -2,124 +2,124 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tab-bar-wrapper {
-  --default-indent: 10px;
-  --darwin-not-fullscreen-indent: 74px;
+    --default-indent: 10px;
+    --darwin-not-fullscreen-indent: 74px;
 }
 
 .darwin:not(.fullscreen) .tab-bar-wrapper {
-  .window-drag.left {
-    width: var(--darwin-not-fullscreen-indent);
-  }
+    .window-drag.left {
+        width: var(--darwin-not-fullscreen-indent);
+    }
 }
 
 .config-error-message {
-  max-width: 500px;
+    max-width: 500px;
 
-  h3 {
-    margin-bottom: 10px;
-  }
+    h3 {
+        margin-bottom: 10px;
+    }
 
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 .tab-bar-wrapper {
-  position: relative;
-  user-select: none;
-  display: flex;
-  flex-direction: row;
-  width: env(titlebar-area-width);
-
-  .tabs-wrapper {
-    transition: var(--tabs-wrapper-transition);
-    height: 32px;
-  }
-
-  .tab-bar {
-    position: relative; // Needed for absolute positioning of child tabs
+    position: relative;
+    user-select: none;
     display: flex;
     flex-direction: row;
-    height: 33px;
-  }
+    width: env(titlebar-area-width);
 
-  .pinned-tab-spacer {
-    display: block;
-    height: 100%;
-    margin: 2px;
-    border: 1px solid var(--border-color);
-  }
-
-  .dev-label,
-  .app-menu-button {
-    font-size: 26px;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 6px 6px 0 0;
-  }
-
-  .app-menu-button {
-    cursor: pointer;
-    color: var(--secondary-text-color);
-
-    &:hover {
-      color: var(--main-text-color);
-    }
-  }
-
-  .dev-label {
-    color: var(--accent-color);
-  }
-
-  .config-error-button {
-    height: 80%;
-    margin: auto 4px;
-    color: black;
-    flex: 0 0 fit-content;
-  }
-
-  .add-tab-btn {
-    width: 22px;
-    height: 100%;
-    cursor: pointer;
-    font-size: 14px;
-    text-align: center;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.5;
-
-    &:hover {
-      opacity: 1;
+    .tabs-wrapper {
+        transition: var(--tabs-wrapper-transition);
+        height: 32px;
     }
 
-    i {
-      overflow: hidden;
-      margin-top: 5px;
-      font-size: 11px;
+    .tab-bar {
+        position: relative; // Needed for absolute positioning of child tabs
+        display: flex;
+        flex-direction: row;
+        height: 33px;
     }
-  }
 
-  .window-drag {
-    height: 100%;
-    width: var(--default-indent);
-    flex-shrink: 0;
-
-    &.right {
-      flex-grow: 1;
+    .pinned-tab-spacer {
+        display: block;
+        height: 100%;
+        margin: 2px;
+        border: 1px solid var(--border-color);
     }
-  }
 
-  // Customize scrollbar styles
-  .os-theme-dark,
-  .os-theme-light {
-    box-sizing: border-box;
-    --os-size: 2px;
-    --os-padding-perpendicular: 0px;
-    --os-padding-axis: 0px;
-    --os-track-border-radius: 2px;
-    --os-handle-interactive-area-offset: 0px;
-    --os-handle-border-radius: 2px;
-  }
+    .dev-label,
+    .app-menu-button {
+        font-size: 26px;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 6px 6px 0 0;
+    }
+
+    .app-menu-button {
+        cursor: pointer;
+        color: var(--secondary-text-color);
+
+        &:hover {
+            color: var(--main-text-color);
+        }
+    }
+
+    .dev-label {
+        color: var(--accent-color);
+    }
+
+    .config-error-button {
+        height: 80%;
+        margin: auto 4px;
+        color: black;
+        flex: 0 0 fit-content;
+    }
+
+    .add-tab-btn {
+        width: 22px;
+        height: 100%;
+        cursor: pointer;
+        font-size: 14px;
+        text-align: center;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.5;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        i {
+            overflow: hidden;
+            margin-top: 5px;
+            font-size: 11px;
+        }
+    }
+
+    .window-drag {
+        height: 100%;
+        width: var(--default-indent);
+        flex-shrink: 0;
+
+        &.right {
+            flex-grow: 1;
+        }
+    }
+
+    // Customize scrollbar styles
+    .os-theme-dark,
+    .os-theme-light {
+        box-sizing: border-box;
+        --os-size: 2px;
+        --os-padding-perpendicular: 0px;
+        --os-padding-axis: 0px;
+        --os-track-border-radius: 2px;
+        --os-handle-interactive-area-offset: 0px;
+        --os-handle-border-radius: 2px;
+    }
 }
diff --git a/frontend/app/tab/tabcontent.scss b/frontend/app/tab/tabcontent.scss
index 5743ab741..fdab4154d 100644
--- a/frontend/app/tab/tabcontent.scss
+++ b/frontend/app/tab/tabcontent.scss
@@ -2,35 +2,35 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tabcontent {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  min-height: 0;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  padding-top: 3px;
-  padding-right: 3px;
-
-  .block-container {
     display: flex;
     flex-direction: row;
-    flex: 1 0 0;
-    height: 100%;
+    flex-grow: 1;
+    min-height: 0;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
     overflow: hidden;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-  }
+    position: relative;
+    padding-top: 3px;
+    padding-right: 3px;
+
+    .block-container {
+        display: flex;
+        flex-direction: row;
+        flex: 1 0 0;
+        height: 100%;
+        overflow: hidden;
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+    }
 }
 
 .drag-preview {
-  display: block;
-  width: 100px;
-  height: 20px;
-  border-radius: 2px;
-  background-color: aquamarine;
-  color: black;
-  text-align: center;
+    display: block;
+    width: 100px;
+    height: 20px;
+    border-radius: 2px;
+    background-color: aquamarine;
+    color: black;
+    text-align: center;
 }
diff --git a/frontend/app/tab/updatebanner.scss b/frontend/app/tab/updatebanner.scss
index 71d63c821..8b99c3265 100644
--- a/frontend/app/tab/updatebanner.scss
+++ b/frontend/app/tab/updatebanner.scss
@@ -1,11 +1,11 @@
 .update-available-button {
-  height: 80%;
-  margin: auto 4px;
-  color: black;
-  background-color: var(--accent-color);
-  flex: 0 0 fit-content;
+    height: 80%;
+    margin: auto 4px;
+    color: black;
+    background-color: var(--accent-color);
+    flex: 0 0 fit-content;
 
-  &:disabled {
-    opacity: unset !important;
-  }
+    &:disabled {
+        opacity: unset !important;
+    }
 }
diff --git a/frontend/app/tab/workspaceswitcher.scss b/frontend/app/tab/workspaceswitcher.scss
index e3dbd4cce..eb7d96a30 100644
--- a/frontend/app/tab/workspaceswitcher.scss
+++ b/frontend/app/tab/workspaceswitcher.scss
@@ -2,224 +2,230 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .workspace-switcher-button {
-  display: flex;
-  height: 26px;
-  padding: 0px 12px;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 12px;
-  border-radius: 6px;
-  background: var(--modal-bg-color);
-  margin-top: 6px;
-  margin-right: 13px;
-  box-sizing: border-box;
-
-  .workspace-icon {
-    width: 15px;
-    height: 15px;
     display: flex;
+    height: 26px;
+    padding: 0px 12px;
+    justify-content: flex-end;
     align-items: center;
-    justify-content: center;
-  }
+    gap: 12px;
+    border-radius: 6px;
+    background: var(--modal-bg-color);
+    margin-top: 6px;
+    margin-right: 13px;
+    box-sizing: border-box;
+
+    .workspace-icon {
+        width: 15px;
+        height: 15px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 .icon-left,
 .icon-right {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
 }
 
 .divider {
-  width: 1px;
-  height: 20px;
-  background: rgba(255, 255, 255, 0.08);
+    width: 1px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.08);
 }
 
 .scrollable {
-  max-height: 400px;
-  width: 100%;
+    max-height: 400px;
+    width: 100%;
 }
 
 .workspace-switcher-content {
-  min-height: auto;
-  display: flex;
-  width: 256px;
-  padding: 0;
-  flex-direction: column;
-  align-items: center;
-  border-radius: 8px;
-  box-shadow: 0px 8px 24px 0px var(--modal-shadow-color);
+    min-height: auto;
+    display: flex;
+    width: 256px;
+    padding: 0;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    box-shadow: 0px 8px 24px 0px var(--modal-shadow-color);
 
-  .title {
-    font-size: 12px;
-    line-height: 19px;
-    font-weight: 600;
-    margin-bottom: 5px;
-    width: 100%;
-    padding: 6px 8px 0px;
-  }
+    .title {
+        font-size: 12px;
+        line-height: 19px;
+        font-weight: 600;
+        margin-bottom: 5px;
+        width: 100%;
+        padding: 6px 8px 0px;
+    }
 
-  .expandable-menu {
-    gap: 5px;
-  }
-
-  .expandable-menu-item {
-    margin: 3px 8px;
-  }
-
-  .expandable-menu-item-group {
-    margin: 0 8px;
-
-    &:last-child {
-      margin-bottom: 4px;
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
+    .expandable-menu {
+        gap: 5px;
     }
 
     .expandable-menu-item {
-      margin: 0;
-    }
-  }
-
-  .expandable-menu-item-group {
-    border: 1px solid transparent;
-    border-radius: 4px;
-
-    --workspace-color: var(--main-bg-color);
-
-    .menu-group-title-wrapper {
-      display: flex;
-      width: 100%;
-      padding: 5px 8px;
-      border-radius: 4px;
-      .icons {
-        display: flex;
-        flex-direction: row;
-        gap: 5px;
-      }
-
-      .iconbutton.edit {
-        visibility: hidden;
-      }
-
-      .iconbutton.window {
-        cursor: default;
-        opacity: 1 !important;
-      }
+        margin: 3px 8px;
     }
 
-    &:hover .iconbutton.edit {
-      visibility: visible;
-    }
+    .expandable-menu-item-group {
+        margin: 0 8px;
 
-    &.open {
-      background-color: var(--modal-bg-color);
-      border: 1px solid var(--modal-border-color);
-    }
-
-    &.is-current .menu-group-title-wrapper {
-      background-color: rgb(from var(--workspace-color) r g b / 0.1);
-    }
-  }
-
-  .expandable-menu-item,
-  .expandable-menu-item-group-title {
-    font-size: 12px;
-    line-height: 19px;
-    padding: 5px 8px;
-
-    .content {
-      width: 100%;
-    }
-
-    &:hover {
-      background-color: transparent;
-    }
-  }
-
-  .expandable-menu-item-group-title {
-    height: 29px;
-    padding: 0;
-
-    .left-icon {
-      font-size: 14px;
-    }
-  }
-
-  .color-icon-selector {
-    width: 100%;
-    .input {
-      margin: 5px 0 10px;
-    }
-
-    .color-selector {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(15px, 15px)); // Ensures each color circle has a fixed 14px size
-      grid-gap: 18.5px; // Space between items
-      justify-content: center;
-      align-items: center;
-      margin-top: 5px;
-
-      .color-circle {
-        width: 15px;
-        height: 15px;
-        border-radius: 50%;
-        cursor: pointer;
-        position: relative;
-
-        // Border offset outward
-        &:before {
-          content: "";
-          position: absolute;
-          top: -3px;
-          left: -3px;
-          right: -3px;
-          bottom: -3px;
-          border-radius: 50%;
-          border: 1px solid transparent;
+        &:last-child {
+            margin-bottom: 4px;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
         }
 
-        &.selected:before {
-          border-color: var(--main-text-color); // Highlight for the selected circle
+        .expandable-menu-item {
+            margin: 0;
         }
-      }
     }
 
-    .icon-selector {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(16px, 16px)); // Ensures each color circle has a fixed 14px size
-      grid-column-gap: 17.5px; // Space between items
-      grid-row-gap: 13px; // Space between items
-      justify-content: center;
-      align-items: center;
-      margin-top: 15px;
+    .expandable-menu-item-group {
+        border: 1px solid transparent;
+        border-radius: 4px;
 
-      .icon-item {
-        font-size: 15px;
-        color: oklch(from var(--modal-bg-color) calc(l * 1.5) c h);
-        cursor: pointer;
-        transition: color 0.3s ease;
+        --workspace-color: var(--main-bg-color);
+
+        .menu-group-title-wrapper {
+            display: flex;
+            width: 100%;
+            padding: 5px 8px;
+            border-radius: 4px;
+            .icons {
+                display: flex;
+                flex-direction: row;
+                gap: 5px;
+            }
+
+            .iconbutton.edit {
+                visibility: hidden;
+            }
+
+            .iconbutton.window {
+                cursor: default;
+                opacity: 1 !important;
+            }
+        }
+
+        &:hover .iconbutton.edit {
+            visibility: visible;
+        }
+
+        &.open {
+            background-color: var(--modal-bg-color);
+            border: 1px solid var(--modal-border-color);
+        }
+
+        &.is-current .menu-group-title-wrapper {
+            background-color: rgb(from var(--workspace-color) r g b / 0.1);
+        }
+    }
+
+    .expandable-menu-item,
+    .expandable-menu-item-group-title {
+        font-size: 12px;
+        line-height: 19px;
+        padding: 5px 8px;
+
+        .content {
+            width: 100%;
+        }
 
-        &.selected,
         &:hover {
-          color: var(--main-text-color);
+            background-color: transparent;
         }
-      }
     }
 
-    .delete-ws-btn-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 10px;
-    }
-  }
+    .expandable-menu-item-group-title {
+        height: 29px;
+        padding: 0;
 
-  .actions {
-    width: 100%;
-    padding: 3px 0;
-    border-top: 1px solid var(--modal-border-color);
-  }
+        .left-icon {
+            font-size: 14px;
+        }
+    }
+
+    .color-icon-selector {
+        width: 100%;
+        .input {
+            margin: 5px 0 10px;
+        }
+
+        .color-selector {
+            display: grid;
+            grid-template-columns: repeat(
+                auto-fit,
+                minmax(15px, 15px)
+            ); // Ensures each color circle has a fixed 14px size
+            grid-gap: 18.5px; // Space between items
+            justify-content: center;
+            align-items: center;
+            margin-top: 5px;
+
+            .color-circle {
+                width: 15px;
+                height: 15px;
+                border-radius: 50%;
+                cursor: pointer;
+                position: relative;
+
+                // Border offset outward
+                &:before {
+                    content: "";
+                    position: absolute;
+                    top: -3px;
+                    left: -3px;
+                    right: -3px;
+                    bottom: -3px;
+                    border-radius: 50%;
+                    border: 1px solid transparent;
+                }
+
+                &.selected:before {
+                    border-color: var(--main-text-color); // Highlight for the selected circle
+                }
+            }
+        }
+
+        .icon-selector {
+            display: grid;
+            grid-template-columns: repeat(
+                auto-fit,
+                minmax(16px, 16px)
+            ); // Ensures each color circle has a fixed 14px size
+            grid-column-gap: 17.5px; // Space between items
+            grid-row-gap: 13px; // Space between items
+            justify-content: center;
+            align-items: center;
+            margin-top: 15px;
+
+            .icon-item {
+                font-size: 15px;
+                color: oklch(from var(--modal-bg-color) calc(l * 1.5) c h);
+                cursor: pointer;
+                transition: color 0.3s ease;
+
+                &.selected,
+                &:hover {
+                    color: var(--main-text-color);
+                }
+            }
+        }
+
+        .delete-ws-btn-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: 10px;
+        }
+    }
+
+    .actions {
+        width: 100%;
+        padding: 3px 0;
+        border-top: 1px solid var(--modal-border-color);
+    }
 }
diff --git a/frontend/app/theme.scss b/frontend/app/theme.scss
index efd389e29..9ff18f5af 100644
--- a/frontend/app/theme.scss
+++ b/frontend/app/theme.scss
@@ -5,157 +5,157 @@
 @import url("../../node_modules/highlight.js/styles/github-dark-dimmed.min.css");
 
 :root {
-  --main-text-color: #f7f7f7;
-  --title-font-size: 18px;
-  --window-opacity: 1;
-  --secondary-text-color: rgb(195, 200, 194);
-  --grey-text-color: #666;
-  --main-bg-color: rgb(34, 34, 34);
-  --border-color: rgba(255, 255, 255, 0.16);
-  --base-font: normal 14px / normal "Inter", sans-serif;
-  --fixed-font: normal 12px / normal "Hack", monospace;
-  --accent-color: rgb(88, 193, 66);
-  --panel-bg-color: rgba(31, 33, 31, 0.5);
-  --highlight-bg-color: rgba(255, 255, 255, 0.2);
-  --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji";
-  --error-color: rgb(229, 77, 46);
-  --warning-color: rgb(224, 185, 86);
-  --success-color: rgb(78, 154, 6);
-  --hover-bg-color: rgba(255, 255, 255, 0.1);
-  --block-bg-color: rgba(0, 0, 0, 0.5);
-  --block-bg-solid-color: rgb(0, 0, 0);
-  --block-border-radius: 8px;
+    --main-text-color: #f7f7f7;
+    --title-font-size: 18px;
+    --window-opacity: 1;
+    --secondary-text-color: rgb(195, 200, 194);
+    --grey-text-color: #666;
+    --main-bg-color: rgb(34, 34, 34);
+    --border-color: rgba(255, 255, 255, 0.16);
+    --base-font: normal 14px / normal "Inter", sans-serif;
+    --fixed-font: normal 12px / normal "Hack", monospace;
+    --accent-color: rgb(88, 193, 66);
+    --panel-bg-color: rgba(31, 33, 31, 0.5);
+    --highlight-bg-color: rgba(255, 255, 255, 0.2);
+    --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji";
+    --error-color: rgb(229, 77, 46);
+    --warning-color: rgb(224, 185, 86);
+    --success-color: rgb(78, 154, 6);
+    --hover-bg-color: rgba(255, 255, 255, 0.1);
+    --block-bg-color: rgba(0, 0, 0, 0.5);
+    --block-bg-solid-color: rgb(0, 0, 0);
+    --block-border-radius: 8px;
 
-  --keybinding-color: #e0e0e0;
-  --keybinding-bg-color: #333;
-  --keybinding-border-color: #444;
+    --keybinding-color: #e0e0e0;
+    --keybinding-bg-color: #333;
+    --keybinding-border-color: #444;
 
-  /* scrollbar colors */
-  --scrollbar-background-color: transparent;
-  --scrollbar-thumb-color: rgba(255, 255, 255, 0.15);
-  --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
-  --scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
+    /* scrollbar colors */
+    --scrollbar-background-color: transparent;
+    --scrollbar-thumb-color: rgba(255, 255, 255, 0.15);
+    --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
+    --scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
 
-  --header-font: 700 11px / normal "Inter", sans-serif;
-  --header-icon-size: 14px;
-  --header-icon-width: 16px;
-  --header-height: 30px;
+    --header-font: 700 11px / normal "Inter", sans-serif;
+    --header-icon-size: 14px;
+    --header-icon-width: 16px;
+    --header-height: 30px;
 
-  --tab-green: rgb(88, 193, 66);
+    --tab-green: rgb(88, 193, 66);
 
-  /* z-index values */
-  --zindex-header-hover: 100;
-  --zindex-termstickers: 20;
-  --zindex-modal: 2;
-  --zindex-modal-wrapper: 500;
-  --zindex-modal-backdrop: 1;
-  --zindex-typeahead-modal: 100;
-  --zindex-typeahead-modal-backdrop: 90;
-  --zindex-elem-modal: 100;
-  --zindex-window-drag: 100;
-  --zindex-tab-name: 3;
-  --zindex-layout-display-container: 0;
-  --zindex-layout-last-magnified-node: 1;
-  --zindex-layout-last-ephemeral-node: 2;
-  --zindex-layout-resize-handle: 3;
-  --zindex-layout-placeholder-container: 4;
-  --zindex-layout-overlay-container: 5;
-  --zindex-layout-magnified-node-backdrop: 6;
-  --zindex-layout-magnified-node: 7;
-  --zindex-layout-ephemeral-node-backdrop: 8;
-  --zindex-layout-ephemeral-node: 9;
-  --zindex-block-mask-inner: 10;
-  --zindex-flash-error-container: 550;
-  --zindex-app-background: -1;
+    /* z-index values */
+    --zindex-header-hover: 100;
+    --zindex-termstickers: 20;
+    --zindex-modal: 2;
+    --zindex-modal-wrapper: 500;
+    --zindex-modal-backdrop: 1;
+    --zindex-typeahead-modal: 100;
+    --zindex-typeahead-modal-backdrop: 90;
+    --zindex-elem-modal: 100;
+    --zindex-window-drag: 100;
+    --zindex-tab-name: 3;
+    --zindex-layout-display-container: 0;
+    --zindex-layout-last-magnified-node: 1;
+    --zindex-layout-last-ephemeral-node: 2;
+    --zindex-layout-resize-handle: 3;
+    --zindex-layout-placeholder-container: 4;
+    --zindex-layout-overlay-container: 5;
+    --zindex-layout-magnified-node-backdrop: 6;
+    --zindex-layout-magnified-node: 7;
+    --zindex-layout-ephemeral-node-backdrop: 8;
+    --zindex-layout-ephemeral-node: 9;
+    --zindex-block-mask-inner: 10;
+    --zindex-flash-error-container: 550;
+    --zindex-app-background: -1;
 
-  // z-indexes in xterm.css
-  // xterm-helpers: 5
-  // xterm-helper-textarea: -5
-  // composition-view: 1
-  // xterm-message: 10
-  // xterm-decoration: 6
-  // xterm-decoration-top-layer: 7
-  // xterm-decoration-overview-ruler: 8
-  // xterm-decoration-top: 2
-  --zindex-xterm-viewport-overlay: 5; // Viewport contains the scrollbar
+    // z-indexes in xterm.css
+    // xterm-helpers: 5
+    // xterm-helper-textarea: -5
+    // composition-view: 1
+    // xterm-message: 10
+    // xterm-decoration: 6
+    // xterm-decoration-top-layer: 7
+    // xterm-decoration-overview-ruler: 8
+    // xterm-decoration-top: 2
+    --zindex-xterm-viewport-overlay: 5; // Viewport contains the scrollbar
 
-  // modal colors
-  --modal-bg-color: #232323;
-  --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
-  --modal-border-color: rgba(255, 255, 255, 0.12); /* toggle colors */
-  --toggle-bg-color: var(--border-color);
-  --modal-shadow-color: rgba(0, 0, 0, 0.8);
+    // modal colors
+    --modal-bg-color: #232323;
+    --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
+    --modal-border-color: rgba(255, 255, 255, 0.12); /* toggle colors */
+    --toggle-bg-color: var(--border-color);
+    --modal-shadow-color: rgba(0, 0, 0, 0.8);
 
-  --toggle-thumb-color: var(--main-text-color);
-  --toggle-checked-bg-color: var(--accent-color);
+    --toggle-thumb-color: var(--main-text-color);
+    --toggle-checked-bg-color: var(--accent-color);
 
-  // link color
-  --link-color: #58c142;
+    // link color
+    --link-color: #58c142;
 
-  // form colors
-  --form-element-border-color: rgba(241, 246, 243, 0.15);
-  --form-element-bg-color: var(--main-bg-color);
-  --form-element-text-color: var(--main-text-color);
-  --form-element-primary-text-color: var(--main-text-color);
-  --form-element-primary-color: var(--accent-color);
-  --form-element-secondary-color: rgba(255, 255, 255, 0.2);
-  --form-element-error-color: var(--error-color);
+    // form colors
+    --form-element-border-color: rgba(241, 246, 243, 0.15);
+    --form-element-bg-color: var(--main-bg-color);
+    --form-element-text-color: var(--main-text-color);
+    --form-element-primary-text-color: var(--main-text-color);
+    --form-element-primary-color: var(--accent-color);
+    --form-element-secondary-color: rgba(255, 255, 255, 0.2);
+    --form-element-error-color: var(--error-color);
 
-  --conn-icon-color: #53b4ea;
-  --conn-icon-color-1: #53b4ea;
-  --conn-icon-color-2: #aa67ff;
-  --conn-icon-color-3: #fda7fd;
-  --conn-icon-color-4: #ef476f;
-  --conn-icon-color-5: #497bf8;
-  --conn-icon-color-6: #ffa24e;
-  --conn-icon-color-7: #dbde52;
-  --conn-icon-color-8: #58c142;
-  --conn-status-overlay-bg-color: rgba(230, 186, 30, 0.2);
+    --conn-icon-color: #53b4ea;
+    --conn-icon-color-1: #53b4ea;
+    --conn-icon-color-2: #aa67ff;
+    --conn-icon-color-3: #fda7fd;
+    --conn-icon-color-4: #ef476f;
+    --conn-icon-color-5: #497bf8;
+    --conn-icon-color-6: #ffa24e;
+    --conn-icon-color-7: #dbde52;
+    --conn-icon-color-8: #58c142;
+    --conn-status-overlay-bg-color: rgba(230, 186, 30, 0.2);
 
-  --sysinfo-cpu-color: #58c142;
-  --sysinfo-mem-color: #53b4ea;
+    --sysinfo-cpu-color: #58c142;
+    --sysinfo-mem-color: #53b4ea;
 
-  --bulb-color: rgb(255, 221, 51);
+    --bulb-color: rgb(255, 221, 51);
 
-  // term colors (16 + 6) form the base terminal theme
-  // for consistency these colors should be used by plugins/applications
-  --term-black: #000000;
-  --term-red: #cc0000;
-  --term-green: #4e9a06;
-  --term-yellow: #c4a000;
-  --term-blue: #3465a4;
-  --term-magenta: #bc3fbc;
-  --term-cyan: #06989a;
-  --term-white: #d0d0d0;
-  --term-bright-black: #555753;
-  --term-bright-red: #ef2929;
-  --term-bright-green: #58c142;
-  --term-bright-yellow: #fce94f;
-  --term-bright-blue: #32afff;
-  --term-bright-magenta: #ad7fa8;
-  --term-bright-cyan: #34e2e2;
-  --term-bright-white: #e7e7e7;
+    // term colors (16 + 6) form the base terminal theme
+    // for consistency these colors should be used by plugins/applications
+    --term-black: #000000;
+    --term-red: #cc0000;
+    --term-green: #4e9a06;
+    --term-yellow: #c4a000;
+    --term-blue: #3465a4;
+    --term-magenta: #bc3fbc;
+    --term-cyan: #06989a;
+    --term-white: #d0d0d0;
+    --term-bright-black: #555753;
+    --term-bright-red: #ef2929;
+    --term-bright-green: #58c142;
+    --term-bright-yellow: #fce94f;
+    --term-bright-blue: #32afff;
+    --term-bright-magenta: #ad7fa8;
+    --term-bright-cyan: #34e2e2;
+    --term-bright-white: #e7e7e7;
 
-  --term-gray: #8b918a; // not an official terminal color
-  --term-cmdtext: #ffffff;
-  --term-foreground: #d3d7cf;
-  --term-background: #000000;
-  --term-selection-background: #ffffff60;
-  --term-cursor-accent: #000000;
+    --term-gray: #8b918a; // not an official terminal color
+    --term-cmdtext: #ffffff;
+    --term-foreground: #d3d7cf;
+    --term-background: #000000;
+    --term-selection-background: #ffffff60;
+    --term-cursor-accent: #000000;
 
-  // button colors
-  --button-text-color: #000000;
-  --button-green-bg: var(--term-green);
-  --button-green-border-color: #29f200;
-  --button-grey-bg: rgba(255, 255, 255, 0.04);
-  --button-grey-hover-bg: rgba(255, 255, 255, 0.09);
-  --button-grey-border-color: rgba(255, 255, 255, 0.1);
-  --button-grey-outlined-color: rgba(255, 255, 255, 0.6);
-  --button-red-bg: #cc0000;
-  --button-red-hover-bg: #f93939;
-  --button-red-border-color: #fc3131;
-  --button-red-outlined-color: #ff3c3c;
-  --button-yellow-bg: #c4a000;
-  --button-yellow-hover-bg: #fce94f;
+    // button colors
+    --button-text-color: #000000;
+    --button-green-bg: var(--term-green);
+    --button-green-border-color: #29f200;
+    --button-grey-bg: rgba(255, 255, 255, 0.04);
+    --button-grey-hover-bg: rgba(255, 255, 255, 0.09);
+    --button-grey-border-color: rgba(255, 255, 255, 0.1);
+    --button-grey-outlined-color: rgba(255, 255, 255, 0.6);
+    --button-red-bg: #cc0000;
+    --button-red-hover-bg: #f93939;
+    --button-red-border-color: #fc3131;
+    --button-red-outlined-color: #ff3c3c;
+    --button-yellow-bg: #c4a000;
+    --button-yellow-hover-bg: #fce94f;
 }
diff --git a/frontend/app/view/chat/channels.scss b/frontend/app/view/chat/channels.scss
index bb49f0a62..eed93867b 100644
--- a/frontend/app/view/chat/channels.scss
+++ b/frontend/app/view/chat/channels.scss
@@ -2,29 +2,29 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .channel-list {
-  width: 180px;
-  background-color: rgba(255, 255, 255, 0.025);
-  overflow-x: hidden;
-  padding: 5px;
+    width: 180px;
+    background-color: rgba(255, 255, 255, 0.025);
+    overflow-x: hidden;
+    padding: 5px;
 
-  .menu-item-button {
-    padding: 5px 7px;
-  }
+    .menu-item-button {
+        padding: 5px 7px;
+    }
 
-  .nested-list {
-    padding-left: 10px;
-  }
+    .nested-list {
+        padding-left: 10px;
+    }
 
-  .menu-item-text {
-    color: rgb(from var(--main-text-color) r g b / 0.7);
-  }
+    .menu-item-text {
+        color: rgb(from var(--main-text-color) r g b / 0.7);
+    }
 
-  .has-children .menu-item-text {
-    font-size: 14px;
-  }
+    .has-children .menu-item-text {
+        font-size: 14px;
+    }
 
-  .is-open .menu-item-text {
-    color: var(--main-text-color);
-    font-weight: bold;
-  }
+    .is-open .menu-item-text {
+        color: var(--main-text-color);
+        font-weight: bold;
+    }
 }
diff --git a/frontend/app/view/chat/chat.scss b/frontend/app/view/chat/chat.scss
index 77e2b3737..0e7d49fb4 100644
--- a/frontend/app/view/chat/chat.scss
+++ b/frontend/app/view/chat/chat.scss
@@ -2,30 +2,30 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .chat-view {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-
-  .chat-section {
     display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
 
-    .message-wrapper {
-      flex-grow: 1; // Make the ChatMessages take up available height
-      display: flex;
-      flex-direction: column;
-      overflow: hidden; // Ensure content doesn't overflow
+    .chat-section {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+
+        .message-wrapper {
+            flex-grow: 1; // Make the ChatMessages take up available height
+            display: flex;
+            flex-direction: column;
+            overflow: hidden; // Ensure content doesn't overflow
+        }
+
+        .chatbox {
+            display: flex;
+            align-items: center;
+
+            textarea {
+                border: none;
+            }
+        }
     }
-
-    .chatbox {
-      display: flex;
-      align-items: center;
-
-      textarea {
-        border: none;
-      }
-    }
-  }
 }
diff --git a/frontend/app/view/chat/chatmessages.scss b/frontend/app/view/chat/chatmessages.scss
index eb624a5dd..7321fc764 100644
--- a/frontend/app/view/chat/chatmessages.scss
+++ b/frontend/app/view/chat/chatmessages.scss
@@ -2,50 +2,50 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .chat-messages {
-  height: 100%;
-  width: 100%;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+    height: 100%;
+    width: 100%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .chat-message {
-  display: flex;
-  align-items: flex-start;
-  align-items: center;
-  margin-bottom: 8px;
-  font-size: 1em;
-  line-height: 1.4;
+    display: flex;
+    align-items: flex-start;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 1em;
+    line-height: 1.4;
 }
 
 .chat-user-icon {
-  height: 1em; /* Make user icon height match the text height */
-  width: 1em; /* Keep the icon proportional */
-  border-radius: 50%;
-  margin-right: 8px;
+    height: 1em; /* Make user icon height match the text height */
+    width: 1em; /* Keep the icon proportional */
+    border-radius: 50%;
+    margin-right: 8px;
 }
 
 .chat-username {
-  font-weight: bold;
-  margin-right: 4px;
-  line-height: 1.4; /* Ensure alignment with the first line of the message */
+    font-weight: bold;
+    margin-right: 4px;
+    line-height: 1.4; /* Ensure alignment with the first line of the message */
 }
 
 .chat-text {
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
 }
 
 .chat-text img {
-  height: 1em; /* Make inline images (rendered via markdown) match the text height */
-  width: auto; /* Keep the aspect ratio of images */
-  margin: 0 4px;
-  display: inline;
+    height: 1em; /* Make inline images (rendered via markdown) match the text height */
+    width: auto; /* Keep the aspect ratio of images */
+    margin: 0 4px;
+    display: inline;
 }
 
 .chat-emoji {
-  margin: 0 2px;
-  font-size: 1em; /* Match emoji size with the text height */
+    margin: 0 2px;
+    font-size: 1em; /* Match emoji size with the text height */
 }
diff --git a/frontend/app/view/chat/userlist.scss b/frontend/app/view/chat/userlist.scss
index b7da24d4c..0e909c5ce 100644
--- a/frontend/app/view/chat/userlist.scss
+++ b/frontend/app/view/chat/userlist.scss
@@ -2,35 +2,35 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .user-list {
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-  max-width: 250px;
-  background-color: rgba(255, 255, 255, 0.025);
-  padding: 5px;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    max-width: 250px;
+    background-color: rgba(255, 255, 255, 0.025);
+    padding: 5px;
 }
 
 .user-status-item {
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  margin-bottom: 6px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
 .user-status-item:hover {
-  background-color: var(--button-grey-hover-bg);
-  border-radius: 4px;
+    background-color: var(--button-grey-hover-bg);
+    border-radius: 4px;
 }
 
 .user-status-icon {
-  margin-right: 10px;
-  display: flex;
-  align-items: center;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
 }
 
 .user-status-text {
-  font-size: 1em;
-  font-weight: bold;
+    font-size: 1em;
+    font-weight: bold;
 }
diff --git a/frontend/app/view/codeeditor/codeeditor.scss b/frontend/app/view/codeeditor/codeeditor.scss
index c006157a7..c5896e058 100644
--- a/frontend/app/view/codeeditor/codeeditor.scss
+++ b/frontend/app/view/codeeditor/codeeditor.scss
@@ -2,28 +2,28 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .code-editor-wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-
-  .code-editor {
     display: flex;
     flex-direction: column;
-    height: 100%;
     width: 100%;
+    height: 100%;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
 
-    .monaco-editor .slider {
-      background: rgba(255, 255, 255, 0.4);
-      border-radius: 4px;
-      transition: background 0.2s ease;
+    .code-editor {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
 
-      &:hover {
-        background: rgba(255, 255, 255, 0.6);
-      }
+        .monaco-editor .slider {
+            background: rgba(255, 255, 255, 0.4);
+            border-radius: 4px;
+            transition: background 0.2s ease;
+
+            &:hover {
+                background: rgba(255, 255, 255, 0.6);
+            }
+        }
     }
-  }
 }
diff --git a/frontend/app/view/helpview/helpview.scss b/frontend/app/view/helpview/helpview.scss
index 62a463709..9e5c7263c 100644
--- a/frontend/app/view/helpview/helpview.scss
+++ b/frontend/app/view/helpview/helpview.scss
@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .help-view {
-  width: 100%;
-  height: 100%;
-  .docsite-webview {
     width: 100%;
     height: 100%;
-    border: 0;
-  }
+    .docsite-webview {
+        width: 100%;
+        height: 100%;
+        border: 0;
+    }
 }
diff --git a/frontend/app/view/plotview/plotview.scss b/frontend/app/view/plotview/plotview.scss
index 928d5013e..9f12d37a4 100644
--- a/frontend/app/view/plotview/plotview.scss
+++ b/frontend/app/view/plotview/plotview.scss
@@ -2,21 +2,21 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .plot-view {
-  width: 100%;
-
-  .plot-window {
-    display: flex;
-    justify-content: center;
-  }
-
-  .plot-config {
     width: 100%;
-    margin: 0;
-    padding: 0;
-    resize: none;
-    height: 50vh;
-    background-color: var(--panel-bg-color);
-    color: var(--main-text-color);
-    font: var(--fixed-font);
-  }
+
+    .plot-window {
+        display: flex;
+        justify-content: center;
+    }
+
+    .plot-config {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        resize: none;
+        height: 50vh;
+        background-color: var(--panel-bg-color);
+        color: var(--main-text-color);
+        font: var(--fixed-font);
+    }
 }
diff --git a/frontend/app/view/preview/csvview.scss b/frontend/app/view/preview/csvview.scss
index 873a1b3f8..07514cd71 100644
--- a/frontend/app/view/preview/csvview.scss
+++ b/frontend/app/view/preview/csvview.scss
@@ -4,93 +4,93 @@
 @use "../../mixins.scss";
 
 .csv-view {
-  opacity: 0; /* Start with an opacity of 0, meaning it's invisible */
+    opacity: 0; /* Start with an opacity of 0, meaning it's invisible */
 
-  @include mixins.ellipsis();
+    @include mixins.ellipsis();
 
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
-  .select-none {
-    user-select: none;
-  }
-
-  table.probe {
-    position: absolute;
-    visibility: hidden;
-  }
-
-  table {
-    border-collapse: collapse;
     overflow-x: auto;
-    border: 1px solid var(--scrollbar-thumb-hover-color);
+    overflow-y: hidden;
 
-    thead {
-      position: relative;
-      display: block;
-      width: 100%;
-      overflow-y: scroll;
+    .cursor-pointer {
+        cursor: pointer;
+    }
 
-      tr {
-        border-bottom: 1px solid var(--scrollbar-thumb-hover-color);
+    .select-none {
+        user-select: none;
+    }
 
-        th {
-          color: var(--main-text-color);
-          border-right: 1px solid var(--scrollbar-thumb-hover-color);
-          border-bottom: none;
-          padding: 2px 10px;
-          flex-basis: 100%;
-          flex-grow: 2;
-          display: block;
-          text-align: left;
-          position: relative;
+    table.probe {
+        position: absolute;
+        visibility: hidden;
+    }
 
-          .inner {
-            text-align: left;
-            padding-right: 15px;
+    table {
+        border-collapse: collapse;
+        overflow-x: auto;
+        border: 1px solid var(--scrollbar-thumb-hover-color);
+
+        thead {
             position: relative;
-            @include mixins.ellipsis();
+            display: block;
+            width: 100%;
+            overflow-y: scroll;
 
-            .sort-icon {
-              position: absolute;
-              right: 0px;
-              top: 2px;
-              width: 9px;
+            tr {
+                border-bottom: 1px solid var(--scrollbar-thumb-hover-color);
+
+                th {
+                    color: var(--main-text-color);
+                    border-right: 1px solid var(--scrollbar-thumb-hover-color);
+                    border-bottom: none;
+                    padding: 2px 10px;
+                    flex-basis: 100%;
+                    flex-grow: 2;
+                    display: block;
+                    text-align: left;
+                    position: relative;
+
+                    .inner {
+                        text-align: left;
+                        padding-right: 15px;
+                        position: relative;
+                        @include mixins.ellipsis();
+
+                        .sort-icon {
+                            position: absolute;
+                            right: 0px;
+                            top: 2px;
+                            width: 9px;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
-    }
 
-    tbody {
-      display: block;
-      position: relative;
-      overflow-y: scroll;
-      overscroll-behavior: contain;
-    }
+        tbody {
+            display: block;
+            position: relative;
+            overflow-y: scroll;
+            overscroll-behavior: contain;
+        }
 
-    tr {
-      width: 100%;
-      display: flex;
+        tr {
+            width: 100%;
+            display: flex;
 
-      td {
-        border-right: 1px solid var(--scrollbar-thumb-hover-color);
-        border-left: 1px solid var(--scrollbar-thumb-hover-color);
-        padding: 3px 10px;
-        flex-basis: 100%;
-        flex-grow: 2;
-        display: block;
-        text-align: left;
-        @include mixins.ellipsis();
-      }
+            td {
+                border-right: 1px solid var(--scrollbar-thumb-hover-color);
+                border-left: 1px solid var(--scrollbar-thumb-hover-color);
+                padding: 3px 10px;
+                flex-basis: 100%;
+                flex-grow: 2;
+                display: block;
+                text-align: left;
+                @include mixins.ellipsis();
+            }
+        }
     }
-  }
 }
 
 .csv-view.show {
-  opacity: 1;
+    opacity: 1;
 }
diff --git a/frontend/app/view/preview/directorypreview.scss b/frontend/app/view/preview/directorypreview.scss
index 4a5b5046b..dc84fb0bf 100644
--- a/frontend/app/view/preview/directorypreview.scss
+++ b/frontend/app/view/preview/directorypreview.scss
@@ -4,249 +4,249 @@
 @use "../../mixins.scss";
 
 .dir-table-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  --min-row-width: 35rem;
-  .dir-table {
-    height: 100%;
-    width: 100%;
-    --col-size-size: 0.2rem;
     display: flex;
     flex-direction: column;
-
-    &:not([data-scroll-height="0"]) .dir-table-head::after {
-      background: oklch(from var(--block-bg-color) calc(l + 0.5) c h);
-      backdrop-filter: blur(2px);
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-
-    .dir-table-head {
-      position: sticky;
-      top: 0;
-      z-index: 10;
-      width: 100%;
-      border-bottom: 1px solid var(--border-color);
-
-      .dir-table-head-row {
+    height: 100%;
+    --min-row-width: 35rem;
+    .dir-table {
+        height: 100%;
+        width: 100%;
+        --col-size-size: 0.2rem;
         display: flex;
-        min-width: var(--min-row-width);
-        padding: 4px 6px;
-        font-size: 0.75rem;
+        flex-direction: column;
 
-        .dir-table-head-cell {
-          flex: 0 0 auto;
-          user-select: none;
+        &:not([data-scroll-height="0"]) .dir-table-head::after {
+            background: oklch(from var(--block-bg-color) calc(l + 0.5) c h);
+            backdrop-filter: blur(2px);
+            content: "";
+            z-index: -1;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
         }
-        .dir-table-head-cell:not(:first-child) {
-          position: relative;
-          display: flex;
-          white-space: nowrap;
-          overflow: hidden;
 
-          .dir-table-head-cell-content {
-            padding: 2px 4px;
-            display: flex;
-            gap: 0.3rem;
-            flex: 1 1 auto;
-            overflow-x: hidden;
-            letter-spacing: -0.12px;
+        .dir-table-head {
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            width: 100%;
+            border-bottom: 1px solid var(--border-color);
 
-            .dir-table-head-direction {
-              margin-right: 0.2rem;
-              margin-top: 0.2rem;
+            .dir-table-head-row {
+                display: flex;
+                min-width: var(--min-row-width);
+                padding: 4px 6px;
+                font-size: 0.75rem;
+
+                .dir-table-head-cell {
+                    flex: 0 0 auto;
+                    user-select: none;
+                }
+                .dir-table-head-cell:not(:first-child) {
+                    position: relative;
+                    display: flex;
+                    white-space: nowrap;
+                    overflow: hidden;
+
+                    .dir-table-head-cell-content {
+                        padding: 2px 4px;
+                        display: flex;
+                        gap: 0.3rem;
+                        flex: 1 1 auto;
+                        overflow-x: hidden;
+                        letter-spacing: -0.12px;
+
+                        .dir-table-head-direction {
+                            margin-right: 0.2rem;
+                            margin-top: 0.2rem;
+                        }
+
+                        .dir-table-head-size {
+                            align-self: flex-end;
+                        }
+                    }
+
+                    .dir-table-head-resize-box {
+                        width: 12px;
+                        display: flex;
+                        justify-content: center;
+                        flex: 0 0 auto;
+                        .dir-table-head-resize {
+                            cursor: col-resize;
+                            user-select: none;
+                            -webkit-user-select: none;
+                            touch-action: none;
+                            width: 4px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .dir-table-body {
+            display: flex;
+            flex-direction: column;
+            .dir-table-body-search-display {
+                display: flex;
+                border-radius: 3px;
+                padding: 0.25rem 0.5rem;
+                background-color: var(--warning-color);
+
+                .search-display-close-button {
+                    margin-left: auto;
+                }
+            }
+
+            .dir-table-body-scroll-box {
+                position: relative;
+                .dummy {
+                    position: absolute;
+                    visibility: hidden;
+                }
+                .dir-table-body-row {
+                    display: flex;
+                    align-items: center;
+                    border-radius: 5px;
+                    padding: 0 6px;
+                    min-width: var(--min-row-width);
+
+                    &.focused {
+                        background-color: rgb(from var(--accent-color) r g b / 0.5);
+                        color: var(--main-text-color);
+
+                        .dir-table-body-cell {
+                            .dir-table-lastmod,
+                            .dir-table-modestr,
+                            .dir-table-size,
+                            .dir-table-type {
+                                color: var(--main-text-color);
+                            }
+                        }
+                    }
+
+                    &:focus {
+                        background-color: rgb(from var(--accent-color) r g b / 0.5);
+                        color: var(--main-text-color);
+
+                        .dir-table-body-cell {
+                            .dir-table-lastmod,
+                            .dir-table-modestr,
+                            .dir-table-size,
+                            .dir-table-type {
+                                color: var(--main-text-color);
+                            }
+                        }
+                    }
+
+                    &:hover:not(:focus):not(.focused) {
+                        background-color: var(--highlight-bg-color);
+                    }
+
+                    .dir-table-body-cell {
+                        overflow: hidden;
+                        white-space: nowrap;
+                        padding: 0.25rem;
+                        cursor: default;
+                        font-size: 0.8125rem;
+                        flex: 0 0 auto;
+
+                        &.col-size {
+                            text-align: right;
+                        }
+
+                        .dir-table-lastmod,
+                        .dir-table-modestr,
+                        .dir-table-size,
+                        .dir-table-type {
+                            color: var(--secondary-text-color);
+                            margin-right: 12px;
+                        }
+
+                        .dir-table-type {
+                            @include mixins.ellipsis();
+                        }
+
+                        .dir-table-modestr {
+                            font-family: Hack;
+                        }
+
+                        &:has(.dir-table-name) {
+                            @include mixins.ellipsis();
+                        }
+                        .dir-table-name {
+                            font-weight: 500;
+                        }
+                    }
+                }
             }
-
-            .dir-table-head-size {
-              align-self: flex-end;
-            }
-          }
-
-          .dir-table-head-resize-box {
-            width: 12px;
-            display: flex;
-            justify-content: center;
-            flex: 0 0 auto;
-            .dir-table-head-resize {
-              cursor: col-resize;
-              user-select: none;
-              -webkit-user-select: none;
-              touch-action: none;
-              width: 4px;
-            }
-          }
         }
-      }
     }
 
-    .dir-table-body {
-      display: flex;
-      flex-direction: column;
-      .dir-table-body-search-display {
+    .dir-table-search-line {
         display: flex;
-        border-radius: 3px;
-        padding: 0.25rem 0.5rem;
-        background-color: var(--warning-color);
+        justify-content: flex-end;
+        gap: 0.7rem;
 
-        .search-display-close-button {
-          margin-left: auto;
+        .dir-table-search-box {
+            width: 0;
+            height: 0;
+            opacity: 0;
+            padding: 0;
+            border: none;
+            pointer-events: none;
         }
-      }
-
-      .dir-table-body-scroll-box {
-        position: relative;
-        .dummy {
-          position: absolute;
-          visibility: hidden;
-        }
-        .dir-table-body-row {
-          display: flex;
-          align-items: center;
-          border-radius: 5px;
-          padding: 0 6px;
-          min-width: var(--min-row-width);
-
-          &.focused {
-            background-color: rgb(from var(--accent-color) r g b / 0.5);
-            color: var(--main-text-color);
-
-            .dir-table-body-cell {
-              .dir-table-lastmod,
-              .dir-table-modestr,
-              .dir-table-size,
-              .dir-table-type {
-                color: var(--main-text-color);
-              }
-            }
-          }
-
-          &:focus {
-            background-color: rgb(from var(--accent-color) r g b / 0.5);
-            color: var(--main-text-color);
-
-            .dir-table-body-cell {
-              .dir-table-lastmod,
-              .dir-table-modestr,
-              .dir-table-size,
-              .dir-table-type {
-                color: var(--main-text-color);
-              }
-            }
-          }
-
-          &:hover:not(:focus):not(.focused) {
-            background-color: var(--highlight-bg-color);
-          }
-
-          .dir-table-body-cell {
-            overflow: hidden;
-            white-space: nowrap;
-            padding: 0.25rem;
-            cursor: default;
-            font-size: 0.8125rem;
-            flex: 0 0 auto;
-
-            &.col-size {
-              text-align: right;
-            }
-
-            .dir-table-lastmod,
-            .dir-table-modestr,
-            .dir-table-size,
-            .dir-table-type {
-              color: var(--secondary-text-color);
-              margin-right: 12px;
-            }
-
-            .dir-table-type {
-              @include mixins.ellipsis();
-            }
-
-            .dir-table-modestr {
-              font-family: Hack;
-            }
-
-            &:has(.dir-table-name) {
-              @include mixins.ellipsis();
-            }
-            .dir-table-name {
-              font-weight: 500;
-            }
-          }
-        }
-      }
     }
-  }
-
-  .dir-table-search-line {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.7rem;
-
-    .dir-table-search-box {
-      width: 0;
-      height: 0;
-      opacity: 0;
-      padding: 0;
-      border: none;
-      pointer-events: none;
-    }
-  }
 }
 
 .dir-table-button {
-  background-color: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  padding: 0.2rem;
-  border-radius: 6px;
+    background-color: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 0.2rem;
+    border-radius: 6px;
 
-  input {
-    width: 0;
-    height: 0;
-    opacity: 0;
-    padding: 0;
-    border: none;
-    pointer-events: none;
-  }
+    input {
+        width: 0;
+        height: 0;
+        opacity: 0;
+        padding: 0;
+        border: none;
+        pointer-events: none;
+    }
 
-  &:hover {
-    background-color: var(--highlight-bg-color);
-  }
+    &:hover {
+        background-color: var(--highlight-bg-color);
+    }
 
-  &:focus {
-    background-color: var(--highlight-bg-color);
-  }
+    &:focus {
+        background-color: var(--highlight-bg-color);
+    }
 
-  &:focus-within {
-    background-color: var(--highlight-bg-color);
-  }
+    &:focus-within {
+        background-color: var(--highlight-bg-color);
+    }
 }
 
 .entry-manager-overlay {
-  display: flex;
-  flex-direction: column;
-  max-width: 90%;
-  max-height: fit-content;
-  display: flex;
-  padding: 10px;
-  gap: 10px;
-  border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: #212121;
-  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
-
-  .entry-manager-buttons {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    max-width: 90%;
+    max-height: fit-content;
+    display: flex;
+    padding: 10px;
     gap: 10px;
-  }
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: #212121;
+    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
+
+    .entry-manager-buttons {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+    }
 }
diff --git a/frontend/app/view/preview/preview.scss b/frontend/app/view/preview/preview.scss
index 41843ca39..0d29f58e5 100644
--- a/frontend/app/view/preview/preview.scss
+++ b/frontend/app/view/preview/preview.scss
@@ -2,82 +2,82 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .view-preview {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  flex-grow: 1;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-  padding: 0 5px;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    flex-grow: 1;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    padding: 0 5px;
 
-  &.view-preview-markdown {
-    align-items: start;
-    justify-content: start;
-    overflow: auto;
-  }
-
-  &.view-preview-text {
-    align-items: start;
-    justify-content: start;
-    overflow: auto;
-
-    pre {
-      font: var(--fixed-font);
+    &.view-preview-markdown {
+        align-items: start;
+        justify-content: start;
+        overflow: auto;
     }
-  }
 
-  &.view-preview-image,
-  &.view-preview-video,
-  &.view-preview-audio {
-    video,
-    audio,
-    img {
-      width: 100%;
-      height: 100%;
-      padding: 10px;
-      object-fit: contain;
+    &.view-preview-text {
+        align-items: start;
+        justify-content: start;
+        overflow: auto;
+
+        pre {
+            font: var(--fixed-font);
+        }
+    }
+
+    &.view-preview-image,
+    &.view-preview-video,
+    &.view-preview-audio {
+        video,
+        audio,
+        img {
+            width: 100%;
+            height: 100%;
+            padding: 10px;
+            object-fit: contain;
+        }
+    }
+    &.view-preview-directory {
+        flex-direction: column;
+        align-items: start;
     }
-  }
-  &.view-preview-directory {
-    flex-direction: column;
-    align-items: start;
-  }
 }
 
 .full-preview {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: hidden;
 }
 
 .view-nav {
-  display: flex;
-  flex-shrink: 0;
-  padding: 0.2rem 0 0.2rem 0;
+    display: flex;
+    flex-shrink: 0;
+    padding: 0.2rem 0 0.2rem 0;
 
-  .view-nav-item {
-    border-radius: 3px;
-    padding: 0.2rem 0;
+    .view-nav-item {
+        border-radius: 3px;
+        padding: 0.2rem 0;
 
-    &.clickable {
-      cursor: pointer;
+        &.clickable {
+            cursor: pointer;
 
-      &:hover {
-        background-color: var(--highlight-bg-color);
-      }
+            &:hover {
+                background-color: var(--highlight-bg-color);
+            }
+        }
+
+        &.current-file {
+            background-color: transparent;
+            cursor: default;
+            font-weight: bold;
+        }
     }
-
-    &.current-file {
-      background-color: transparent;
-      cursor: default;
-      font-weight: bold;
-    }
-  }
 }
 
 .full-preview-content {
-  flex-grow: 1;
-  overflow: hidden;
+    flex-grow: 1;
+    overflow: hidden;
 }
diff --git a/frontend/app/view/quicktipsview/quicktipsview.scss b/frontend/app/view/quicktipsview/quicktipsview.scss
index 661f1a7e4..6b22bbc31 100644
--- a/frontend/app/view/quicktipsview/quicktipsview.scss
+++ b/frontend/app/view/quicktipsview/quicktipsview.scss
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .quicktips-view {
-  padding: 10px 5px;
-  overflow: auto;
-  width: 100%;
+    padding: 10px 5px;
+    overflow: auto;
+    width: 100%;
 }
diff --git a/frontend/app/view/sysinfo/sysinfo.scss b/frontend/app/view/sysinfo/sysinfo.scss
index b4572b90f..cfa5c1f10 100644
--- a/frontend/app/view/sysinfo/sysinfo.scss
+++ b/frontend/app/view/sysinfo/sysinfo.scss
@@ -2,32 +2,32 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .sysinfo-view {
-  flex-flow: column nowrap;
-  flex-grow: 1;
-  margin-bottom: 0;
-  overflow-y: auto;
-  .sysinfo-inner {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
-    gap: 10px;
+    flex-flow: column nowrap;
+    flex-grow: 1;
+    margin-bottom: 0;
+    overflow-y: auto;
+    .sysinfo-inner {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
+        gap: 10px;
 
-    &.two-columns {
-      grid-template-columns: 1fr 1fr;
-    }
-
-    .sysinfo-plot-content {
-      min-height: 100px;
-      svg {
-        [aria-label="tip"] {
-          g {
-            path {
-              color: var(--border-color);
-            }
-          }
+        &.two-columns {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        .sysinfo-plot-content {
+            min-height: 100px;
+            svg {
+                [aria-label="tip"] {
+                    g {
+                        path {
+                            color: var(--border-color);
+                        }
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
diff --git a/frontend/app/view/term/term.scss b/frontend/app/view/term/term.scss
index b460ef958..9ef67f8b5 100644
--- a/frontend/app/view/term/term.scss
+++ b/frontend/app/view/term/term.scss
@@ -2,145 +2,145 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .connection-btn {
-  min-height: 0;
-  overflow: hidden;
-  line-height: 1;
-  display: flex;
-  background-color: orangered;
-  justify-content: flex-start;
-  width: 200px;
-}
-
-.view-term {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-
-  .term-header {
-    display: flex;
-    flex-direction: row;
-    padding: 4px 10px;
-    height: 35px;
-    gap: 10px;
-    align-items: center;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .term-toolbar {
-    height: 20px;
-    border-bottom: 1px solid var(--border-color);
-    overflow: hidden;
-  }
-
-  .term-connectelem {
-    flex-grow: 1;
     min-height: 0;
     overflow: hidden;
     line-height: 1;
-    margin: 5px;
-    margin-left: 4px;
-  }
+    display: flex;
+    background-color: orangered;
+    justify-content: flex-start;
+    width: 200px;
+}
 
-  .term-htmlelem {
+.view-term {
     display: flex;
     flex-direction: column;
     width: 100%;
-    flex-grow: 1;
-    min-height: 0;
-    overflow: hidden;
-
-    .block-content {
-      padding: 0;
-    }
-  }
-
-  &.term-mode-term {
-    .term-connectelem {
-      display: flex;
-    }
-    .term-htmlelem {
-      display: none;
-    }
-  }
-
-  &.term-mode-vdom {
-    .term-connectelem {
-      display: none;
-    }
-    .term-htmlelem {
-      display: flex;
-    }
-
-    .ijson iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-    }
-  }
-
-  .term-stickers {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
     height: 100%;
-    z-index: var(--zindex-termstickers);
-    pointer-events: none;
+    overflow: hidden;
+    position: relative;
 
-    .term-sticker-image {
-      img {
-        object-fit: contain;
-        width: 100%;
-        height: 100%;
-      }
+    .term-header {
+        display: flex;
+        flex-direction: row;
+        padding: 4px 10px;
+        height: 35px;
+        gap: 10px;
+        align-items: center;
+        flex-shrink: 0;
+        border-bottom: 1px solid var(--border-color);
     }
 
-    .term-sticker-svg {
-      svg {
-        object-fit: contain;
+    .term-toolbar {
+        height: 20px;
+        border-bottom: 1px solid var(--border-color);
+        overflow: hidden;
+    }
+
+    .term-connectelem {
+        flex-grow: 1;
+        min-height: 0;
+        overflow: hidden;
+        line-height: 1;
+        margin: 5px;
+        margin-left: 4px;
+    }
+
+    .term-htmlelem {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        flex-grow: 1;
+        min-height: 0;
+        overflow: hidden;
+
+        .block-content {
+            padding: 0;
+        }
+    }
+
+    &.term-mode-term {
+        .term-connectelem {
+            display: flex;
+        }
+        .term-htmlelem {
+            display: none;
+        }
+    }
+
+    &.term-mode-vdom {
+        .term-connectelem {
+            display: none;
+        }
+        .term-htmlelem {
+            display: flex;
+        }
+
+        .ijson iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    }
+
+    .term-stickers {
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
-      }
+        z-index: var(--zindex-termstickers);
+        pointer-events: none;
+
+        .term-sticker-image {
+            img {
+                object-fit: contain;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .term-sticker-svg {
+            svg {
+                object-fit: contain;
+                width: 100%;
+                height: 100%;
+            }
+        }
     }
-  }
 
-  .terminal {
-    .xterm-viewport {
-      z-index: var(--zindex-xterm-viewport-overlay);
+    .terminal {
+        .xterm-viewport {
+            z-index: var(--zindex-xterm-viewport-overlay);
 
-      &::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
+            &::-webkit-scrollbar {
+                width: 6px;
+                height: 6px;
+            }
 
-      &::-webkit-scrollbar-track {
-        background-color: var(--scrollbar-background-color);
-      }
+            &::-webkit-scrollbar-track {
+                background-color: var(--scrollbar-background-color);
+            }
 
-      &::-webkit-scrollbar-thumb {
-        display: none;
-        background-color: var(--scrollbar-thumb-color);
-        border-radius: 4px;
-        margin: 0 1px 0 1px;
+            &::-webkit-scrollbar-thumb {
+                display: none;
+                background-color: var(--scrollbar-thumb-color);
+                border-radius: 4px;
+                margin: 0 1px 0 1px;
+
+                &:hover {
+                    background-color: var(--scrollbar-thumb-hover-color);
+                }
+
+                &:active {
+                    background-color: var(--scrollbar-thumb-active-color);
+                }
+            }
+        }
 
         &:hover {
-          background-color: var(--scrollbar-thumb-hover-color);
+            .xterm-viewport::-webkit-scrollbar-thumb {
+                display: block;
+            }
         }
-
-        &:active {
-          background-color: var(--scrollbar-thumb-active-color);
-        }
-      }
     }
-
-    &:hover {
-      .xterm-viewport::-webkit-scrollbar-thumb {
-        display: block;
-      }
-    }
-  }
 }
diff --git a/frontend/app/view/vdom/vdom.scss b/frontend/app/view/vdom/vdom.scss
index 37ff99dd8..b8cd5f300 100644
--- a/frontend/app/view/vdom/vdom.scss
+++ b/frontend/app/view/vdom/vdom.scss
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .view-vdom {
-  overflow: auto;
-  width: 100%;
-  min-height: 100%;
+    overflow: auto;
+    width: 100%;
+    min-height: 100%;
 }
diff --git a/frontend/app/view/waveai/waveai.scss b/frontend/app/view/waveai/waveai.scss
index 799680052..c35a5e24e 100644
--- a/frontend/app/view/waveai/waveai.scss
+++ b/frontend/app/view/waveai/waveai.scss
@@ -2,151 +2,151 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .waveai {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
 
-  .waveai-chat {
-    flex-grow: 1;
-    > .scrollable {
-      flex-flow: column nowrap;
-      margin-bottom: 0;
-      overflow-y: auto;
-      min-height: 100%;
+    .waveai-chat {
+        flex-grow: 1;
+        > .scrollable {
+            flex-flow: column nowrap;
+            margin-bottom: 0;
+            overflow-y: auto;
+            min-height: 100%;
 
-      .chat-window {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
+            .chat-window {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
 
-        // This is the filler that will push the chat messages to the bottom until the chat window is full
-        .filler {
-          flex: 1 1 auto;
+                // This is the filler that will push the chat messages to the bottom until the chat window is full
+                .filler {
+                    flex: 1 1 auto;
+                }
+            }
+
+            .chat-msg-container {
+                display: flex;
+                gap: 8px;
+                .chat-msg {
+                    margin: 10px 0;
+                    display: flex;
+                    align-items: flex-start;
+                    border-radius: 8px;
+
+                    &.chat-msg-header {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: flex-start;
+
+                        .icon-box {
+                            padding-top: 0;
+                            border-radius: 4px;
+                            background-color: rgb(from var(--highlight-bg-color) r g b / 0.05);
+                            display: flex;
+                            padding: 6px;
+                        }
+                    }
+
+                    &.chat-msg-assistant {
+                        color: var(--main-text-color);
+                        background-color: rgb(from var(--highlight-bg-color) r g b / 0.1);
+                        margin-right: auto;
+                        padding: 10px;
+                        max-width: 85%;
+
+                        .markdown {
+                            width: 100%;
+
+                            pre {
+                                white-space: pre-wrap;
+                                word-break: break-word;
+                                max-width: 100%;
+                                overflow-x: auto;
+                                margin-left: 0;
+                            }
+                        }
+                    }
+                    &.chat-msg-user {
+                        margin-left: auto;
+                        padding: 10px;
+                        max-width: 85%;
+                        background-color: rgb(from var(--accent-color) r g b / 0.15);
+                    }
+
+                    &.chat-msg-error {
+                        color: var(--main-text-color);
+                        background-color: rgb(from var(--error-color) r g b / 0.25);
+                        margin-right: auto;
+                        padding: 10px;
+                        max-width: 85%;
+
+                        .markdown {
+                            width: 100%;
+
+                            pre {
+                                white-space: pre-wrap;
+                                word-break: break-word;
+                                max-width: 100%;
+                                overflow-x: auto;
+                                margin-left: 0;
+                            }
+                        }
+                    }
+
+                    &.typing-indicator {
+                        margin-top: 4px;
+                    }
+                }
+            }
         }
-      }
+    }
 
-      .chat-msg-container {
+    .waveai-controls {
         display: flex;
-        gap: 8px;
-        .chat-msg {
-          margin: 10px 0;
-          display: flex;
-          align-items: flex-start;
-          border-radius: 8px;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        padding: 8px 6px;
 
-          &.chat-msg-header {
+        .waveai-input-wrapper {
+            padding: 8px 12px;
+            flex: 1 1 auto;
             display: flex;
             flex-direction: column;
-            justify-content: flex-start;
+            justify-content: center;
+            align-items: flex-start;
+            border-radius: 6px;
+            border: 1px solid rgb(from var(--highlight-bg-color) r g b / 0.42);
 
-            .icon-box {
-              padding-top: 0;
-              border-radius: 4px;
-              background-color: rgb(from var(--highlight-bg-color) r g b / 0.05);
-              display: flex;
-              padding: 6px;
+            .waveai-input {
+                color: var(--main-text-color);
+                background-color: inherit;
+                resize: none;
+                width: 100%;
+                border: transparent;
+                outline: none;
+                overflow: auto;
+                overflow-wrap: anywhere;
+                font-family: var(--termfontfamily);
+                font-weight: normal;
+                line-height: var(--termlineheight);
+                height: 21px;
             }
-          }
-
-          &.chat-msg-assistant {
-            color: var(--main-text-color);
-            background-color: rgb(from var(--highlight-bg-color) r g b / 0.1);
-            margin-right: auto;
-            padding: 10px;
-            max-width: 85%;
-
-            .markdown {
-              width: 100%;
-
-              pre {
-                white-space: pre-wrap;
-                word-break: break-word;
-                max-width: 100%;
-                overflow-x: auto;
-                margin-left: 0;
-              }
-            }
-          }
-          &.chat-msg-user {
-            margin-left: auto;
-            padding: 10px;
-            max-width: 85%;
-            background-color: rgb(from var(--accent-color) r g b / 0.15);
-          }
-
-          &.chat-msg-error {
-            color: var(--main-text-color);
-            background-color: rgb(from var(--error-color) r g b / 0.25);
-            margin-right: auto;
-            padding: 10px;
-            max-width: 85%;
-
-            .markdown {
-              width: 100%;
-
-              pre {
-                white-space: pre-wrap;
-                word-break: break-word;
-                max-width: 100%;
-                overflow-x: auto;
-                margin-left: 0;
-              }
-            }
-          }
-
-          &.typing-indicator {
-            margin-top: 4px;
-          }
         }
-      }
+
+        .waveai-submit-button {
+            border-radius: 100%;
+            width: 27px;
+            aspect-ratio: 1 /1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 0 0 auto;
+            padding: 0;
+        }
     }
-  }
-
-  .waveai-controls {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 10px;
-    padding: 8px 6px;
-
-    .waveai-input-wrapper {
-      padding: 8px 12px;
-      flex: 1 1 auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      border-radius: 6px;
-      border: 1px solid rgb(from var(--highlight-bg-color) r g b / 0.42);
-
-      .waveai-input {
-        color: var(--main-text-color);
-        background-color: inherit;
-        resize: none;
-        width: 100%;
-        border: transparent;
-        outline: none;
-        overflow: auto;
-        overflow-wrap: anywhere;
-        font-family: var(--termfontfamily);
-        font-weight: normal;
-        line-height: var(--termlineheight);
-        height: 21px;
-      }
-    }
-
-    .waveai-submit-button {
-      border-radius: 100%;
-      width: 27px;
-      aspect-ratio: 1 /1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex: 0 0 auto;
-      padding: 0;
-    }
-  }
 }
diff --git a/frontend/app/view/webview/webview.scss b/frontend/app/view/webview/webview.scss
index 75ebc8607..761e556ba 100644
--- a/frontend/app/view/webview/webview.scss
+++ b/frontend/app/view/webview/webview.scss
@@ -2,48 +2,48 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .webview {
-  height: 100%;
-  width: 100%;
-  border: none !important;
-  outline: none !important;
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-  user-select: none;
+    height: 100%;
+    width: 100%;
+    border: none !important;
+    outline: none !important;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    user-select: none;
 
-  // try to force pixel alignment to prevent
-  // subpixel rendering artifacts
-  transform: translate3d(0, 0, 0);
-  will-change: transform;
+    // try to force pixel alignment to prevent
+    // subpixel rendering artifacts
+    transform: translate3d(0, 0, 0);
+    will-change: transform;
 }
 
 .webview-error {
-  display: flex;
-  position: absolute;
-  background-color: black;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 100;
-  div {
-    font-size: x-large;
-    color: var(--error-color);
     display: flex;
-    margin: auto;
-    padding: 30px;
-  }
+    position: absolute;
+    background-color: black;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 100;
+    div {
+        font-size: x-large;
+        color: var(--error-color);
+        display: flex;
+        margin: auto;
+        padding: 30px;
+    }
 }
 
 .block-frame-div-url {
-  background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.1);
 
-  input {
-    opacity: 1;
-  }
+    input {
+        opacity: 1;
+    }
 
-  .iconbutton {
-    width: fit-content !important;
-    margin-right: 5px;
-  }
+    .iconbutton {
+        width: fit-content !important;
+        margin-right: 5px;
+    }
 }
diff --git a/frontend/app/workspace/workspace.scss b/frontend/app/workspace/workspace.scss
index 57f49d9f4..19294d6d8 100644
--- a/frontend/app/workspace/workspace.scss
+++ b/frontend/app/workspace/workspace.scss
@@ -2,69 +2,69 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .workspace {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  flex-grow: 1;
-  overflow: hidden;
-
-  .workspace-tabcontent {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    overflow: hidden;
-  }
-
-  .workspace-widgets {
     display: flex;
     flex-direction: column;
-    width: 50px;
+    width: 100%;
+    flex-grow: 1;
     overflow: hidden;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    margin-left: -4px;
-    user-select: none;
 
-    .widget {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      padding: 8px 2px 8px 0px;
-      color: var(--secondary-text-color);
-      font-size: 20px;
-      overflow: hidden;
-      border-radius: 4px;
-
-      &:hover:not(.no-hover) {
-        background-color: var(--highlight-bg-color);
-        cursor: pointer;
-        color: white !important;
-      }
-
-      .widget-icon {
-      }
-
-      .widget-label {
-        font-size: 10px;
-        margin-top: 3px;
-        width: 100%;
-        padding: 0 2px;
-        text-align: center;
-        white-space: nowrap;
+    .workspace-tabcontent {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
         overflow: hidden;
-      }
     }
 
-    .widget-divider {
-      margin-right: 2px;
-      height: 2px;
-      background-color: var(--border-color);
-    }
+    .workspace-widgets {
+        display: flex;
+        flex-direction: column;
+        width: 50px;
+        overflow: hidden;
+        padding-top: 4px;
+        padding-bottom: 4px;
+        margin-left: -4px;
+        user-select: none;
 
-    .widget-spacer {
-      flex-grow: 1;
+        .widget {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            padding: 8px 2px 8px 0px;
+            color: var(--secondary-text-color);
+            font-size: 20px;
+            overflow: hidden;
+            border-radius: 4px;
+
+            &:hover:not(.no-hover) {
+                background-color: var(--highlight-bg-color);
+                cursor: pointer;
+                color: white !important;
+            }
+
+            .widget-icon {
+            }
+
+            .widget-label {
+                font-size: 10px;
+                margin-top: 3px;
+                width: 100%;
+                padding: 0 2px;
+                text-align: center;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+        }
+
+        .widget-divider {
+            margin-right: 2px;
+            height: 2px;
+            background-color: var(--border-color);
+        }
+
+        .widget-spacer {
+            flex-grow: 1;
+        }
     }
-  }
 }
diff --git a/frontend/layout/lib/tilelayout.scss b/frontend/layout/lib/tilelayout.scss
index 53c55efb5..850e61bcd 100644
--- a/frontend/layout/lib/tilelayout.scss
+++ b/frontend/layout/lib/tilelayout.scss
@@ -2,148 +2,148 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tile-layout {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-
-  --gap-size-px: 5px;
-
-  .overlay-container,
-  .display-container,
-  .placeholder-container {
-    position: absolute;
-    display: flex;
-    top: 0;
-    left: 0;
+    position: relative;
     height: 100%;
     width: 100%;
-    min-height: 4rem;
-    min-width: 4rem;
-  }
-
-  .display-container {
-    z-index: var(--zindex-layout-display-container);
-  }
-
-  .placeholder-container {
-    z-index: var(--zindex-layout-placeholder-container);
-  }
-
-  .overlay-container {
-    z-index: var(--zindex-layout-overlay-container);
-  }
-
-  .overlay-node {
-    display: flex;
-    flex: 0 1 auto;
-  }
-
-  .resize-handle {
-    z-index: var(--zindex-layout-resize-handle);
-
-    .line {
-      visibility: hidden;
-    }
-    &.flex-row {
-      cursor: ew-resize;
-      .line {
-        height: 100%;
-        width: calc(50% + 1px);
-        border-right: 2px solid var(--accent-color);
-      }
-    }
-    &.flex-column {
-      cursor: ns-resize;
-      .line {
-        height: calc(50% + 1px);
-        border-bottom: 2px solid var(--accent-color);
-      }
-    }
-    &:hover .line {
-      visibility: visible;
-
-      // Ignore the prefers-reduced-motion override, since we are not applying a true animation here, just a delay.
-      transition-property: visibility !important;
-      transition-delay: var(--animation-time-s) !important;
-    }
-  }
-
-  .tile-node {
-    border-radius: calc(var(--block-border-radius) + 2px);
     overflow: hidden;
-    width: 100%;
-    height: 100%;
 
-    &.dragging {
-      filter: blur(8px);
+    --gap-size-px: 5px;
+
+    .overlay-container,
+    .display-container,
+    .placeholder-container {
+        position: absolute;
+        display: flex;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        min-height: 4rem;
+        min-width: 4rem;
     }
 
-    &.resizing {
-      border: 1px solid var(--accent-color);
-      backdrop-filter: blur(8px);
+    .display-container {
+        z-index: var(--zindex-layout-display-container);
     }
 
-    .tile-leaf {
-      overflow: hidden;
+    .placeholder-container {
+        z-index: var(--zindex-layout-placeholder-container);
     }
 
-    .tile-preview-container {
-      position: absolute;
-      top: 10000px;
-      white-space: nowrap !important;
-      user-select: none;
-      -webkit-user-select: none;
+    .overlay-container {
+        z-index: var(--zindex-layout-overlay-container);
+    }
 
-      .tile-preview {
+    .overlay-node {
+        display: flex;
+        flex: 0 1 auto;
+    }
+
+    .resize-handle {
+        z-index: var(--zindex-layout-resize-handle);
+
+        .line {
+            visibility: hidden;
+        }
+        &.flex-row {
+            cursor: ew-resize;
+            .line {
+                height: 100%;
+                width: calc(50% + 1px);
+                border-right: 2px solid var(--accent-color);
+            }
+        }
+        &.flex-column {
+            cursor: ns-resize;
+            .line {
+                height: calc(50% + 1px);
+                border-bottom: 2px solid var(--accent-color);
+            }
+        }
+        &:hover .line {
+            visibility: visible;
+
+            // Ignore the prefers-reduced-motion override, since we are not applying a true animation here, just a delay.
+            transition-property: visibility !important;
+            transition-delay: var(--animation-time-s) !important;
+        }
+    }
+
+    .tile-node {
+        border-radius: calc(var(--block-border-radius) + 2px);
+        overflow: hidden;
         width: 100%;
         height: 100%;
-      }
+
+        &.dragging {
+            filter: blur(8px);
+        }
+
+        &.resizing {
+            border: 1px solid var(--accent-color);
+            backdrop-filter: blur(8px);
+        }
+
+        .tile-leaf {
+            overflow: hidden;
+        }
+
+        .tile-preview-container {
+            position: absolute;
+            top: 10000px;
+            white-space: nowrap !important;
+            user-select: none;
+            -webkit-user-select: none;
+
+            .tile-preview {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        &:not(:only-child) .tile-leaf {
+            padding: calc(var(--gap-size-px) / 2);
+        }
     }
 
-    &:not(:only-child) .tile-leaf {
-      padding: calc(var(--gap-size-px) / 2);
+    --block-blur: 2px;
+
+    .magnified-node-backdrop,
+    .ephemeral-node-backdrop {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(var(--block-blur));
     }
-  }
 
-  --block-blur: 2px;
+    .magnified-node-backdrop {
+        z-index: var(--zindex-layout-magnified-node-backdrop);
+    }
 
-  .magnified-node-backdrop,
-  .ephemeral-node-backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    backdrop-filter: blur(var(--block-blur));
-  }
+    .ephemeral-node-backdrop {
+        z-index: var(--zindex-layout-ephemeral-node-backdrop);
+    }
 
-  .magnified-node-backdrop {
-    z-index: var(--zindex-layout-magnified-node-backdrop);
-  }
+    &.animate {
+        .tile-node,
+        .placeholder {
+            transition-duration: var(--animation-time-s);
+            transition-timing-function: linear;
+            transition-property: transform, width, height, background-color;
+        }
+    }
 
-  .ephemeral-node-backdrop {
-    z-index: var(--zindex-layout-ephemeral-node-backdrop);
-  }
+    .tile-leaf,
+    .overlay-leaf {
+        height: 100%;
+        width: 100%;
+    }
 
-  &.animate {
-    .tile-node,
     .placeholder {
-      transition-duration: var(--animation-time-s);
-      transition-timing-function: linear;
-      transition-property: transform, width, height, background-color;
+        background-color: var(--accent-color);
+        opacity: 0.5;
+        border-radius: calc(var(--block-border-radius) + 2px);
     }
-  }
-
-  .tile-leaf,
-  .overlay-leaf {
-    height: 100%;
-    width: 100%;
-  }
-
-  .placeholder {
-    background-color: var(--accent-color);
-    opacity: 0.5;
-    border-radius: calc(var(--block-border-radius) + 2px);
-  }
 }
diff --git a/frontend/layout/lib/tilelayout.stories.scss b/frontend/layout/lib/tilelayout.stories.scss
index 68a79a5a0..b179ffc8f 100644
--- a/frontend/layout/lib/tilelayout.stories.scss
+++ b/frontend/layout/lib/tilelayout.stories.scss
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .placeholder-visible {
-  .overlay-container,
-  .placeholder-container {
-    transform: unset !important;
-  }
+    .overlay-container,
+    .placeholder-container {
+        transform: unset !important;
+    }
 }
diff --git a/public/style.scss b/public/style.scss
index 6883a94bc..2628f4fdb 100644
--- a/public/style.scss
+++ b/public/style.scss
@@ -5,57 +5,57 @@
 @import "./theme.scss";
 
 body {
-  display: flex;
-  flex-direction: row;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--main-bg-color);
-  color: var(--main-text-color);
-  font: var(--base-font);
-  overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--main-bg-color);
+    color: var(--main-text-color);
+    font: var(--base-font);
+    overflow: hidden;
 }
 
 *::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+    width: 4px;
+    height: 4px;
 }
 
 *::-webkit-scrollbar-track {
-  background-color: var(--scrollbar-background-color) !important;
+    background-color: var(--scrollbar-background-color) !important;
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-color) !important;
-  border-radius: 4px;
-  margin: 0 1px 0 1px;
+    background-color: var(--scrollbar-thumb-color) !important;
+    border-radius: 4px;
+    margin: 0 1px 0 1px;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-hover-color) !important;
+    background-color: var(--scrollbar-thumb-hover-color) !important;
 }
 
 .flex-spacer {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 
 .text-fixed {
-  font: var(--fixed-font);
+    font: var(--fixed-font);
 }
 
 #main,
 .mainapp {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
 }
 
 .titlebar {
-  height: 35px;
-  border-bottom: 1px solid var(--border-color);
-  flex-shrink: 0;
+    height: 35px;
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
 }
 
 .error-boundary {
-  color: var(--error-color);
+    color: var(--error-color);
 }