move actorsheet nav tabs to the right of the application

src/ActorSheet.hbs

@@ -15,7 +15,17 @@
     </div>
 {{/inline}}
 
-<div class="actor-sheet ActorSheet" data-tooltip-class="DSA41">
+<div>
+    <nav class="tabs">
+        <a class="fas fa-feather {{#if (eq tabGroups.primary 'tab5')}}active{{/if}}" data-action="tab" data-group="primary" data-tab="tab5" data-tooltip-direction="RIGHT" data-tooltip="{{localize "DSA41.character.allgemein"}}"></a>
+        <a class="fas fa-cog     {{#if (eq tabGroups.primary 'tab1')}}active{{/if}}" data-action="tab" data-group="primary" data-tab="tab1" data-tooltip-direction="RIGHT" data-tooltip="{{localize "DSA41.character.eigenschaften"}}"></a>
+        <a class="fas fa-list    {{#if (eq tabGroups.primary 'tab2')}}active{{/if}}" data-action="tab" data-group="primary" data-tab="tab2" data-tooltip-direction="RIGHT" data-tooltip="{{localize "DSA41.character.talente"}}"></a>
+        <a class="fas fa-sack    {{#if (eq tabGroups.primary 'tab3')}}active{{/if}}" data-action="tab" data-group="primary" data-tab="tab3" data-tooltip-direction="RIGHT" data-tooltip="{{localize "DSA41.character.inventar"}}"></a>
+        <a class="fas fa-swords  {{#if (eq tabGroups.primary 'tab4')}}active{{/if}}" data-action="tab" data-group="primary" data-tab="tab4" data-tooltip-direction="RIGHT" data-tooltip="{{localize "DSA41.character.kampf"}}"></a>
+    </nav>
+
+    <div class="scroll-container">
+        <div class="actor-sheet ActorSheet" data-tooltip-class="DSA41">
             <div class="grid5 gap">
                 {{DSA41_input "name"                subtitle="DSA41.name"}}
                 {{DSA41_input "system.race"         subtitle="DSA41.race"}}
@@ -44,27 +54,8 @@
                         </div>
                     </div>
                 </div>
-
             </div>
 
-    <nav class="tabs">
-        <div class="row noflex {{#if (eq tabGroups.primary 'tab5')}}active{{/if}}" data-group="primary" data-tab="tab5">
-            <a data-group="primary" data-tab="tab5"  data-action="tab">{{localize "DSA41.character.allgemein"}}</a>
-        </div>
-        <div class="row noflex {{#if (eq tabGroups.primary 'tab1')}}active{{/if}}" data-group="primary" data-tab="tab1">
-            <a data-group="primary" data-tab="tab1"  data-action="tab">{{localize "DSA41.character.eigenschaften"}}</a>
-        </div>
-        <div class="row noflex {{#if (eq tabGroups.primary 'tab2')}}active{{/if}}" data-group="primary" data-tab="tab2">
-            <a data-group="primary" data-tab="tab2"  data-action="tab">{{localize "DSA41.character.talente"}}</a>
-        </div>
-        <div class="row noflex {{#if (eq tabGroups.primary 'tab3')}}active{{/if}}" data-group="primary" data-tab="tab3">
-            <a data-group="primary" data-tab="tab3"  data-action="tab">{{localize "DSA41.character.inventar"}}</a>
-        </div>
-        <div class="row noflex {{#if (eq tabGroups.primary 'tab4')}}active{{/if}}" data-group="primary" data-tab="tab4">
-            <a data-group="primary" data-tab="tab4"  data-action="tab">{{localize "DSA41.character.kampf"}}</a>
-        </div>
-    </nav>
-
             <div class="tab {{#if (eq tabGroups.primary 'tab5')}}active{{/if}}" data-group="primary" data-tab="tab5">
                 <div class="grid4 gap align-center">
                     <span>{{localize "DSA41.allgemein.geschlecht"}}</span>
@@ -586,4 +577,6 @@
                         {{/each}}
                 </div>
             </div>
+        </div>
+    </div>
 </div>

src/main.css

@@ -8,9 +8,15 @@ html {
         pointer-events: auto;
     }
 
-    /* Allow application content to be scrolled */
+    /* allow tabs to be visible on the right side of the application */
+    &.application.ActorSheet {
+        overflow: visible;
+    }
+
     & .window-content {
-        overflow-y: scroll;
+        padding:  0;
+        overflow: visible;
+        height:   calc(100% - var(--header-height));
     }
 
     & [data-action] {
@@ -429,6 +435,10 @@ html {
         }
     }
 
+    & [data-application-part]:not([data-application-part="ActorSheet"]) {
+        padding: 1rem;
+    }
+
     & [data-application-part="Bewaffnung"] {
         & .tab {
             grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
@@ -471,6 +481,53 @@ html {
     }
 
     & [data-application-part="ActorSheet"] {
+        height: 100%;
+
+        & .scroll-container {
+            height:     100%;
+            overflow-y: scroll;
+        }
+
+        & .ActorSheet {
+            padding: 1rem;
+        }
+
+        & .tabs {
+            display:        flex;
+            flex-direction: column;
+            align-items:    start;
+
+            position: absolute;
+            z-index:  -1;
+            left:     100%;
+
+            border:  none;
+            padding: 0;
+
+            gap: 2em;
+
+            & > * {
+                transform: none !important;
+
+                &::before {
+                    background: var(--background);
+                    padding: .5em .5em .5em .75em;
+                    border-width: 1px 1px 1px 0px;
+                    border-radius: 0 5px 5px 0;
+                    border-style: solid;
+                    transition: all 250ms ease;
+                }
+
+                &.active, &:hover {
+                    text-decoration: none;
+                
+                    &::before {
+                        padding: .5em .5em .5em 1.25em;
+                    }
+                }
+            }
+        }
+
         & .tab {
             &[data-tab="tab1"] {
                 & .Eigenschaften {

src/main.mjs

@@ -1222,6 +1222,7 @@ class DSA41_ActorSheet extends DSA41_ApplicationMixin(ActorSheetV2) {
     };
 
     static DEFAULT_OPTIONS = {
+        classes: [ "DSA41", "ActorSheet" ],
         position: { width: "800", height: "650" },
         actions: {
             "roll": async function(event, target) {