From ac0695c9c7e5338c01590a3164135c1b47f613f3 Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Mon, 11 Aug 2025 22:35:43 +0200
Subject: [PATCH 01/12] feat: mark labeled-nav as a pc feature

---
 src/app/{ => pc}/labeled-nav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/app/{ => pc}/labeled-nav.scss (99%)

diff --git a/src/app/labeled-nav.scss b/src/app/pc/labeled-nav.scss
similarity index 99%
rename from src/app/labeled-nav.scss
rename to src/app/pc/labeled-nav.scss
index 9be01b8..312bb7f 100644
--- a/src/app/labeled-nav.scss
+++ b/src/app/pc/labeled-nav.scss
@@ -3,7 +3,7 @@ body.is-fullscreen:not(.colorful-frame, .sei-disable-labeled-nav) {
     --labeled-nav-top-margin: 0;
 }
 
-body:not(.sei-disable-labeled-nav) {
+body:not(.sei-disable-labeled-nav, .is-mobile) {
     --labeled-nav-top-margin: var(--header-height);
 
     &.is-translucent {

From fcaec7b9095a84e4e7c9cf42d11ed061b9f91cab Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Mon, 11 Aug 2025 22:35:57 +0200
Subject: [PATCH 02/12] feat: separate workspace with pc only features

---
 src/app/pc/workspace.scss | 53 +++++++++++++++++++++++++++++++++++++++
 src/app/workspace.scss    | 45 ---------------------------------
 2 files changed, 53 insertions(+), 45 deletions(-)
 create mode 100644 src/app/pc/workspace.scss

diff --git a/src/app/pc/workspace.scss b/src/app/pc/workspace.scss
new file mode 100644
index 0000000..f792c25
--- /dev/null
+++ b/src/app/pc/workspace.scss
@@ -0,0 +1,53 @@
+body:not(.is-mobile) {
+  // Background colors transparent everywhere except editors so main container bg color apply everywhere
+  background-color: var(--background-secondary);
+
+  .workspace-ribbon,
+  .workspace-split.mod-root,
+  .workspace-split.mod-sidedock,
+  .workspace-tabs .workspace-leaf,
+  .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
+    background-color: transparent;
+  }
+
+  // feature: accented frame
+  .workspace {
+    background-color: hsla(var(--color-accent-hsl), calc(var(--sei-accented-frame-opacity) * 0.005));
+  }
+
+  // z-index above sidedocks (10)
+  .workspace-split.mod-root {
+    z-index: 20;
+  }
+
+  // Reduce window opacity when unfocused
+  &:not(.is-focused) {
+
+    .workspace-ribbon,
+    .mod-sidedock>div,
+    .mod-root .workspace-tab-header-container {
+      opacity: 0.5;
+      transition: all 1s ease;
+      transition-delay: 5s;
+    }
+  }
+
+  // Hide border between editors todo to remove?
+  .workspace-leaf-resize-handle {
+    border-inline-end-color: transparent;
+  }
+
+  // Remove all borders except horizontal in sidedocks
+  .workspace {
+    --tab-outline-color: transparent;
+    --tab-outline-width: 0;
+    --divider-width: 0;
+    --tab-container-background: transparent;
+    --titlebar-background: transparent;
+    --titlebar-background-focused: transparent;
+  }
+
+  .mod-sidedock > .workspace-tabs > .workspace-leaf-resize-handle {
+    --divider-width: 1px;
+  }
+}
diff --git a/src/app/workspace.scss b/src/app/workspace.scss
index cc0d4e3..3004d9e 100644
--- a/src/app/workspace.scss
+++ b/src/app/workspace.scss
@@ -1,56 +1,11 @@
 // Every style related to the window style
 
-body,
-body .app-container,
-body.is-mobile .app-container,
-body.is-phone .app-container,
-body.is-tablet .app-container {
-    align-items: center;
-    overflow: hidden;
-}
-
 body {
     &:not(.is-phone) {
         --header-height: 44px; // Apply on PC & Tablet
     }
 }
 
-body:not(.is-mobile) {
-
-    .workspace-ribbon,
-    .workspace-split.mod-root,
-    .workspace-split,
-    .workspace-tabs .workspace-leaf,
-    .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
-        background-color: transparent;
-    }
-
-    &:not(.is-translucent) .horizontal-main-container {
-        background-color: var(--background-secondary);
-    }
-
-    .workspace {
-        background-color: hsla(var(--color-accent-hsl), calc(var(--sei-accented-frame-opacity) * 0.005));
-    }
-
-    // Reduce window opacity when unfocused
-    &:not(.is-focused) {
-
-        .workspace-ribbon,
-        .mod-sidedock>div,
-        .mod-root .workspace-tab-header-container {
-            opacity: 0.5;
-            transition: all 1s ease;
-            transition-delay: 5s;
-        }
-    }
-
-    // Hide border between editors
-    .workspace-leaf-resize-handle {
-        border-inline-end-color: transparent;
-    }
-}
-
 .titlebar {
     background-color: transparent !important;
 }
\ No newline at end of file

From 8743d59e6948cbc57a61d7d7db1dec419dec3610 Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Mon, 11 Aug 2025 22:36:08 +0200
Subject: [PATCH 03/12] refactor: add some comments

---
 src/colors/dark.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/colors/dark.scss b/src/colors/dark.scss
index 9430d8c..f298d3a 100644
--- a/src/colors/dark.scss
+++ b/src/colors/dark.scss
@@ -1,10 +1,10 @@
 .theme-dark {
     color-scheme: dark;
 
-    --background-primary: hsl(220deg 2% 15%);
+    --background-primary: hsl(220deg 2% 15%); // bright dark for editors, popups etc...
     --background-primary-alt: hsl(220deg 2% 13%);
 
-    --background-secondary: hsl(220deg 2% 13%);
+    --background-secondary: hsl(220deg 2% 13%); // bright dark for editors, popups etc...
     --background-secondary-alt: hsl(220deg 2% 15%);
 
     --background-table-rows: hsl(220deg 2% 13%);

From e8df9d1d8e8f0bd9913c66f66e8e3ea59a0b241d Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Mon, 11 Aug 2025 23:02:56 +0200
Subject: [PATCH 04/12] fix: bad z-index value for pc workspace

---
 src/app/pc/workspace.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pc/workspace.scss b/src/app/pc/workspace.scss
index f792c25..f616691 100644
--- a/src/app/pc/workspace.scss
+++ b/src/app/pc/workspace.scss
@@ -15,9 +15,9 @@ body:not(.is-mobile) {
     background-color: hsla(var(--color-accent-hsl), calc(var(--sei-accented-frame-opacity) * 0.005));
   }
 
-  // z-index above sidedocks (10)
+  // z-index above sidedocks (10) and under status bar (15)
   .workspace-split.mod-root {
-    z-index: 20;
+    z-index: 12;
   }
 
   // Reduce window opacity when unfocused

From 20e2f075ad30ce4d9f7eba32a41267d5ff3e6dfb Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Mon, 11 Aug 2025 23:03:09 +0200
Subject: [PATCH 05/12] refactor: remove useless code

---
 src/app/editor.scss | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/app/editor.scss b/src/app/editor.scss
index 57aa0f7..35e6f62 100644
--- a/src/app/editor.scss
+++ b/src/app/editor.scss
@@ -5,23 +5,11 @@
     transition: var(--anim-duration-fast) ease-in-out;
 }
 
-.markdown-preview-view {
-    scrollbar-gutter: auto;
-}
-
 .mod-root .workspace-leaf-content[data-mode="source"] .view-header .view-actions button:nth-last-child(2) {
     background-color: var(--interactive-accent) !important;
     color: var(--text-on-accent) !important;
 }
 
-.workspace-leaf-content[data-mode="source"] .markdown-reading-view {
-    transform: scale(0.99);
-}
-
-.workspace-leaf-content[data-mode="preview"] .markdown-source-view {
-    transform: scale(0.99);
-}
-
 .workspace-tabs {
     overflow: visible;
 }

From d2faa8cbe84623ad88b82c6f4be5bf34b0f409a7 Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Mon, 11 Aug 2025 23:40:40 +0200
Subject: [PATCH 06/12] chore: add some comments

---
 src/app/editor.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/editor.scss b/src/app/editor.scss
index 35e6f62..a327d0a 100644
--- a/src/app/editor.scss
+++ b/src/app/editor.scss
@@ -23,15 +23,17 @@
     display: none;
 }
 
-
+// Image render
 img {
     border-radius: var(--radius-s);
 }
 
+// Icons render
 svg.svg-icon {
     fill: none;
 }
 
+// Inline code render
 .markdown-rendered code,
 .cm-s-obsidian .cm-inline-code:not(.cm-formatting) {
     border: var(--border-width) solid var(--background-modifier-border);
@@ -57,6 +59,7 @@ svg.svg-icon {
     inset-inline-end: 36px;
 }
 
+// Highlighter render
 .markdown-rendered mark,
 .cm-s-obsidian span.cm-formatting-highlight,
 .cm-s-obsidian span.cm-highlight {

From 97b0f86cf85324158f288423f48e042a4d2bfb5e Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Tue, 12 Aug 2025 00:41:23 +0200
Subject: [PATCH 07/12] feat: optimize a margin for new-tab screen

---
 src/app/new-tab.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/new-tab.scss b/src/app/new-tab.scss
index dbbe9cb..640582a 100644
--- a/src/app/new-tab.scss
+++ b/src/app/new-tab.scss
@@ -1,3 +1,4 @@
+// Change what's shown when on a empty tab "new tab"
 .view-header,
 .view-content,
 .workspace-tab-container {
@@ -12,8 +13,7 @@
         position: relative;
         justify-content: center;
         align-items: center;
-        margin: 0;
-        margin-top: var(--view-header-height);
+        margin: var(--view-header-height) 0 0;
         padding: var(--file-margins);
         width: 100%;
         max-width: 100%;

From 33530231716724a82c0e814b1d74167b80f8364f Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Tue, 12 Aug 2025 18:01:03 +0200
Subject: [PATCH 08/12] refactor: rewrite tabs

---
 src/app/pc/tabs.scss |  27 +++++
 src/app/tabs.scss    | 233 +++++++++++++++++++++----------------------
 src/theme.scss       |   4 +-
 3 files changed, 142 insertions(+), 122 deletions(-)
 create mode 100644 src/app/pc/tabs.scss

diff --git a/src/app/pc/tabs.scss b/src/app/pc/tabs.scss
new file mode 100644
index 0000000..54e818d
--- /dev/null
+++ b/src/app/pc/tabs.scss
@@ -0,0 +1,27 @@
+// Desktop tabs
+body:not(.is-mobile) {
+  // Margin around editor tabs to get floaty design
+  .mod-root .workspace-tab-header-container-inner {
+    margin: 6px 0;
+  }
+
+  // Cleaner margin around for icon tabs in sidedocks
+  .mod-sidedock .workspace-tab-header-container-inner {
+    margin: 6px 0;
+  }
+
+  // Windows & Linux
+  body.mod-windows.is-hidden-frameless,
+  body.mod-linux.is-hidden-frameless {
+    &.show-ribbon {
+      .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container {
+        padding-left: 0;
+      }
+
+      .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container-inner {
+        z-index: 11;
+        margin-left: 0;
+      }
+    }
+  }
+}
diff --git a/src/app/tabs.scss b/src/app/tabs.scss
index dcc3dfa..90ad3ae 100644
--- a/src/app/tabs.scss
+++ b/src/app/tabs.scss
@@ -2,150 +2,141 @@
 
 // Desktop & Tablet
 body:not(.is-phone) {
-    .workspace {
-        .workspace-tab-header-container-inner {
-            position: relative;
-            border-radius: var(--tab-radius);
-            padding: 0;
-            margin-right: var(--size-2-2);
-        }
-
-        // + & sidear toggle buttons
-        .workspace-tab-header-new-tab .clickable-icon,
-        .sidebar-toggle-button .clickable-icon {
-            padding: 7px; // var(--size-4-2) - 1px to match tabs height
-        }
+  --tab-radius-active: var(--radius-m);
+  --tab-radius: var(--radius-m);
 
-        // Tab list button
-        .workspace-tab-header-tab-list .clickable-icon {
-            padding: 7px var(--size-2-1);
-        }
+  .workspace {
+    .workspace-tab-header-container-inner {
+      position: relative;
+      border-radius: var(--tab-radius);
+      padding: 0;
+      margin-right: var(--size-2-2);
+    }
 
-        // Remove padding and vertically center the sidebar toggle icon inside the div like + & tab icons
-        // Fixes hover area to match the actual icon  like + & tab icons
-        .sidebar-toggle-button {
-            padding: 1px 0 0;
-            align-items: center;
-        }
+    // + & sidear toggle buttons
+    .workspace-tab-header-new-tab .clickable-icon,
+    .sidebar-toggle-button .clickable-icon {
+      padding: 7px; // var(--size-4-2) - 1px to match tabs height
+    }
 
-        .mod-root {
-
-            .workspace-tab-header-container-inner {
-                flex-grow: 1;
-                gap: var(--size-2-2);
-            }
-
-            .workspace-tab-header-spacer {
-                display: none;
-            }
-
-            .workspace-tab-header {
-                opacity: 0.5;
-                border: none;
-                background-color: var(--background-modifier-hover);
-                padding: 0;
-                transition: 160ms ease-out, opacity 120ms ease-in-out;
-                flex-grow: 1;
-
-                &::before,
-                &::after {
-                    display: none;
-                }
-            }
-
-            .workspace-tab-header.is-active {
-                --tab-max-width: 220px;
-
-                opacity: 1;
-                box-shadow: none;
-                flex-grow: 1.25;
-            }
-
-            .workspace-tab-header-inner {
-                padding-inline: 12px 8px;
-            }
-
-            .workspace-tab-header-inner-title {
-                line-height: normal;
-            }
-
-            .workspace-tab-header-status-container {
-                position: absolute;
-                right: 8px;
-            }
-
-            .workspace-tab-header-new-tab,
-            .workspace-tab-header-tab-list {
-                margin: 0;
-                padding: unset;
-            }
-
-            .workspace-tabs.mod-active {
-                z-index: var(--layer-sidedock);
-            }
-        }
+    // Tab list button
+    .workspace-tab-header-tab-list .clickable-icon {
+      padding: 7px var(--size-2-1);
     }
 
-    .workspace .mod-sidedock {
-        .workspace-tab-header-container-inner {
-            gap: 0;
-            transition: var(--anim-duration-fast);
-        }
+    // Remove padding and vertically center the sidebar toggle icon inside the div like + & tab icons
+    // Fixes hover area to match the actual icon  like + & tab icons
+    .sidebar-toggle-button {
+      padding: 1px 0 0;
+      align-items: center;
+    }
 
-        .workspace-tab-header.is-active,
-        .workspace-tab-header-container-inner:hover {
-            background-color: var(--background-modifier-hover);
-        }
 
-        .workspace-tab-header-inner {
-            padding: 0 10px;
+    // Editor tabs styling
+    .mod-root {
+      // Gap between tabs
+      .workspace-tab-header-container-inner {
+        flex-grow: 1;
+        gap: var(--size-2-2);
+      }
+
+      .workspace-tab-header-spacer {
+        display: none;
+      }
+
+      // Tab styling
+      .workspace-tab-header {
+        opacity: 0.5;
+        border: none;
+        background-color: var(--background-modifier-hover);
+        padding: 0;
+        transition: 160ms ease-out, opacity 120ms ease-in-out;
+        flex-grow: 1;
+
+        &::before,
+        &::after {
+          display: none;
         }
+      }
+
+      // Active tab styling
+      .workspace-tab-header.is-active {
+        --tab-max-width: 220px;
+
+        opacity: 1;
+        box-shadow: none;
+        flex-grow: 1.25;
+      }
+
+      .workspace-tab-header-inner {
+        padding-inline: 12px 8px;
+      }
+
+      .workspace-tab-header-inner-title {
+        line-height: normal;
+      }
+
+      .workspace-tab-header-status-container {
+        position: absolute;
+        right: 8px;
+      }
+
+      .workspace-tab-header-new-tab,
+      .workspace-tab-header-tab-list {
+        margin: 0;
+        padding: unset;
+      }
+
+      // Active editor to be above other editor so backdrop shadow overflows nicely
+      .workspace-tabs.mod-active {
+        z-index: var(--layer-sidedock);
+      }
+    }
+  }
 
-        .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-icon {
-            opacity: 0.5;
-        }
+  .workspace .mod-sidedock {
+    // Align border radius for sidedocks tabs icons to be radius-m
+    .workspace-tab-header {
+      border-radius: var(--radius-m);
     }
-}
 
-// Desktop
-body:not(.is-mobile) {
     .workspace-tab-header-container-inner {
-        margin: 6px 0;
+      gap: 0;
+      transition: var(--anim-duration-fast);
     }
-}
 
-// Windows & Linux
-body.mod-windows.is-hidden-frameless,
-body.mod-linux.is-hidden-frameless {
-    &.show-ribbon {
-        .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container {
-            padding-left: 0;
-        }
+    .workspace-tab-header.is-active,
+    .workspace-tab-header-container-inner:hover {
+      background-color: var(--background-modifier-hover);
+    }
 
-        .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container-inner {
-            z-index: 11;
-            margin-left: 0;
-        }
+    .workspace-tab-header-inner {
+      padding: 7px;
+    }
+
+    .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-icon {
+      opacity: 0.5;
     }
+  }
 }
 
 // Tablet
 body.is-tablet {
-    .workspace-tab-header-container {
-        padding: 0 16px !important;
-    }
-
-    .workspace-tab-header-container-inner {
-        margin: 6px 0;
-        padding-left: 88px !important;
-    }
+  .workspace-tab-header-container {
+    padding: 0 16px !important;
+  }
+
+  .workspace-tab-header-container-inner {
+    margin: 6px 0;
+    padding-left: 88px !important;
+  }
 }
 
 // Feature: Centered tabs (Desktop & Tablet)
 body:not(.sei-disable-centered-tabs, .is-phone) {
-    .workspace {
-        .workspace-tab-header-container-inner {
-            justify-content: center;
-        }
+  .workspace {
+    .workspace-tab-header-container-inner {
+      justify-content: center;
     }
+  }
 }
\ No newline at end of file
diff --git a/src/theme.scss b/src/theme.scss
index ad58e0a..9bf024b 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -8,6 +8,7 @@
 
 // Theme
 @use "app/workspace";
+@use "app/pc/workspace" as workspacePC;
 @use "app/workspace-drawer-vault";
 
 @use "app/general";
@@ -15,6 +16,7 @@
 @use "app/sidebar";
 @use "app/ribbon";
 @use "app/tabs";
+@use "app/pc/tabs" as tabsPC;
 
 @use "app/editor";
 
@@ -38,7 +40,7 @@
 
 // Features
 @use "app/new-tab";
-@use "app/labeled-nav";
+@use "app/pc/labeled-nav";
 @use "app/settings";
 @use "app/notice";
 @use "app/status-bar";

From ccbab2f670bf8d0d3cf785d5e07013f2ce1855d6 Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Tue, 12 Aug 2025 18:01:26 +0200
Subject: [PATCH 09/12] fix: workspace editor z-index to be same as sidedocks

---
 src/app/pc/workspace.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pc/workspace.scss b/src/app/pc/workspace.scss
index f616691..524a44f 100644
--- a/src/app/pc/workspace.scss
+++ b/src/app/pc/workspace.scss
@@ -15,9 +15,9 @@ body:not(.is-mobile) {
     background-color: hsla(var(--color-accent-hsl), calc(var(--sei-accented-frame-opacity) * 0.005));
   }
 
-  // z-index above sidedocks (10) and under status bar (15)
+  // z-index same as side-docks so editor drop shadow goes above them
   .workspace-split.mod-root {
-    z-index: 12;
+    z-index: var(--layer-sidedock);
   }
 
   // Reduce window opacity when unfocused

From cd588873b5e9625cb956960319f1bab16ea32897 Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Tue, 12 Aug 2025 18:06:11 +0200
Subject: [PATCH 10/12] feat: remove bad margin in labeled nav

not needed, was caused by bad font family used by me
---
 src/app/pc/labeled-nav.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/pc/labeled-nav.scss b/src/app/pc/labeled-nav.scss
index 312bb7f..2187582 100644
--- a/src/app/pc/labeled-nav.scss
+++ b/src/app/pc/labeled-nav.scss
@@ -76,7 +76,6 @@ body:not(.sei-disable-labeled-nav, .is-mobile) {
             display: inline-block;
             font-weight: 500;
             font-size: var(--font-ui-small);
-            margin-bottom: -3px; // to help vertically center text with icons
         }
 
         .workspace-tab-header-container {

From 92b603b836368464b21761e779b9e91fa1932208 Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Tue, 12 Aug 2025 18:08:22 +0200
Subject: [PATCH 11/12] feat: add slight gap between tabs icons for sidedocks

---
 src/app/tabs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/tabs.scss b/src/app/tabs.scss
index 90ad3ae..9489a63 100644
--- a/src/app/tabs.scss
+++ b/src/app/tabs.scss
@@ -101,7 +101,7 @@ body:not(.is-phone) {
     }
 
     .workspace-tab-header-container-inner {
-      gap: 0;
+      gap: 2px;
       transition: var(--anim-duration-fast);
     }
 

From e5112d919850e0506be660a4c0eeef1e2494de6d Mon Sep 17 00:00:00 2001
From: iwa <iwaongit@gmail.com>
Date: Tue, 12 Aug 2025 22:58:27 +0200
Subject: [PATCH 12/12] feat: adjust sidedock icons tabs padding

---
 src/app/tabs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/tabs.scss b/src/app/tabs.scss
index 9489a63..5361435 100644
--- a/src/app/tabs.scss
+++ b/src/app/tabs.scss
@@ -111,7 +111,7 @@ body:not(.is-phone) {
     }
 
     .workspace-tab-header-inner {
-      padding: 7px;
+      padding: 0 7px;
     }
 
     .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-icon {