move actorsheet nav tabs to the right of the application

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) {