Fixing v9 css mess, thanks for Perkuns help

system/styles/scss/nav.scss

@@ -11,6 +11,8 @@ nav {
         margin-bottom: 0;
         background: $l5r5e-white;
         color: $l5r5e-black;
+        display: flex;
+        flex-direction: row;
         --notchSize: 0.5rem;
         clip-path: polygon(
             0% var(--notchSize),
@@ -24,6 +26,7 @@ nav {
         );
     }
     .item {
+        flex: 1;
         &:hover {
             background-color: $l5r5e-label;
             color: $white-light;
@@ -43,7 +46,6 @@ nav {
     .item.active {
         background-color: rgba(73, 12, 11, 0.85);
         color: rgba(255, 255, 255, 1);
-        background-color: rgba(73, 12, 11, 0.85);
         clip-path: polygon(
             0% var(--notchSize),
             var(--notchSize) 0%,

system/styles/scss/ui.scss

@@ -18,9 +18,9 @@ button {
     border: 1px solid rgb(195, 165, 130);
     border-radius: 0;
     overflow: initial;
-    height: calc(100% - 1rem);
+    height: calc(100% - 0.8rem);
     top: 0.5rem;
-    min-width: 40px;
+    min-width: 320px;
     letter-spacing: 0.1rem;
     &:before {
         z-index: -1;
@@ -94,6 +94,15 @@ button {
                     content: "";
                 }
             }
+            &.fa-id-badge {
+                // TODO needs background image
+                background-size: 85%;
+                color: black;
+                padding-left: 2px;
+                &:before {
+                    content: "\f2c1";
+                }
+            }
             &.fa-music {
                 background-image: url("../assets/ui/sidebar/playlist.svg");
                 background-size: 80%;
@@ -328,9 +337,9 @@ button {
 
 // hotbar
 #hotbar {
-    margin: 0;
+    //margin: 0;
     #action-bar {
-        flex: 0 0 100%;
+        //flex: 0 0 100%;
         .macro {
             background-position: center;
             background-size: 100%;
@@ -406,7 +415,7 @@ button {
     border-image: url("../assets/ui/macro-button.webp") 15 repeat;
     border-image-width: 0.5rem;
     border-image-outset: 0px;
-    margin: 0;
+    //margin: 0;
     padding: 0;
     left: 1.15rem;
     bottom: 0.65rem;
@@ -431,7 +440,7 @@ button {
     height: 80px;
     width: 88px;
     margin-left: 0.5rem;
-    opacity: 0;
+    opacity: 0.9;
 }
 
 // navigation