From 69769d237753ce7d94a02b8daa706994bcbc80fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fynn=20Fl=C3=BCgge?= <fynnfluegge@gmx.de>
Date: Sat, 1 Feb 2025 10:00:36 +0100
Subject: [PATCH] chore: UI sidebar and dialog improvements (#186)

---
 .../config-dialog.component.scss              | 16 ++------------
 .../dialog-llm/llm-dialog.component.scss      | 16 ++------------
 .../component/editor/editor.component.scss    |  2 +-
 .../navigation/sidenav.component.html         |  8 +++----
 .../navigation/sidenav.component.scss         | 22 +++++--------------
 webapp/src/styles.scss                        | 15 ++++++++++++-
 6 files changed, 28 insertions(+), 51 deletions(-)

diff --git a/webapp/src/app/component/dialog-config/config-dialog.component.scss b/webapp/src/app/component/dialog-config/config-dialog.component.scss
index 73c6492a..58383d6a 100644
--- a/webapp/src/app/component/dialog-config/config-dialog.component.scss
+++ b/webapp/src/app/component/dialog-config/config-dialog.component.scss
@@ -1,18 +1,5 @@
-.overlay {
-  display: none;
-  position: fixed;
-  top: -20%;
-  left: 0;
-  width: 100%;
-  height: 120%;
-  background-color: rgba(0, 0, 0, 0.15);
-  color: black;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-}
-
 .dialog {
+  position: absolute;
   background-color: var(--menu-color);
   color: lightgray;
   border-radius: 6px;
@@ -21,6 +8,7 @@
   padding: 12px;
   width: 700px;
   text-align: center;
+  top: 120px;
 }
 
 .open {
diff --git a/webapp/src/app/component/dialog-llm/llm-dialog.component.scss b/webapp/src/app/component/dialog-llm/llm-dialog.component.scss
index 76b62863..3e64af87 100644
--- a/webapp/src/app/component/dialog-llm/llm-dialog.component.scss
+++ b/webapp/src/app/component/dialog-llm/llm-dialog.component.scss
@@ -6,21 +6,8 @@
   padding: 8px 16px;
 }
 
-.overlay {
-  display: none;
-  position: fixed;
-  top: -20%;
-  left: 0;
-  width: 100%;
-  height: 120%;
-  background-color: rgba(0, 0, 0, 0.15);
-  color: black;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-}
-
 .dialog {
+  position: absolute;
   background-color: var(--menu-color);
   color: lightgray;
   border-radius: 6px;
@@ -29,6 +16,7 @@
   padding: 12px;
   width: 800px;
   text-align: center;
+  top: 120px;
 }
 
 .open {
diff --git a/webapp/src/app/component/editor/editor.component.scss b/webapp/src/app/component/editor/editor.component.scss
index 75f73250..d5ed01aa 100644
--- a/webapp/src/app/component/editor/editor.component.scss
+++ b/webapp/src/app/component/editor/editor.component.scss
@@ -53,7 +53,7 @@ div.center {
   transition: 0.25s;
   position: absolute;
   bottom: 12px;
-  width: calc(100% - 264px);
+  width: calc(100% - 364px);
 }
 
 //---- snackbar ---- //
diff --git a/webapp/src/app/component/navigation/sidenav.component.html b/webapp/src/app/component/navigation/sidenav.component.html
index 43fc5ee6..2a7c33e8 100644
--- a/webapp/src/app/component/navigation/sidenav.component.html
+++ b/webapp/src/app/component/navigation/sidenav.component.html
@@ -104,7 +104,7 @@
 
 <div
   class="sidebar"
-  [style.left.px]="showSidebar ? '0' : '-200'"
+  [style.left.px]="showSidebar ? '0' : '-300'"
   (document:keydown.meta.control.n)="addNewItem(null)"
 >
   <button
@@ -293,7 +293,7 @@
             (keyup.escape)="cancelEditItem(node, itemValue.value)"
             placeholder="New document..."
             class="input-field"
-            style="width: 140px; height: 24px; font-size: 14px; padding: 4px"
+            style="width: 240px; height: 24px; font-size: 14px; padding: 4px"
           />
         </mat-form-field>
         <button
@@ -430,8 +430,8 @@
 
 <div
   class="container-t"
-  [style.margin-left.px]="showSidebar ? '260' : '60'"
-  [style.width]="showSidebar ? 'calc(100% - 280px)' : 'calc(100% - 80px)'"
+  [style.margin-left.px]="showSidebar ? '360' : '60'"
+  [style.width]="showSidebar ? 'calc(100% - 380px)' : 'calc(100% - 80px)'"
 >
   <app-editor
     *ngIf="!showZettelkasten"
diff --git a/webapp/src/app/component/navigation/sidenav.component.scss b/webapp/src/app/component/navigation/sidenav.component.scss
index 92c1c589..7ca7aee6 100644
--- a/webapp/src/app/component/navigation/sidenav.component.scss
+++ b/webapp/src/app/component/navigation/sidenav.component.scss
@@ -144,12 +144,11 @@ span:hover {
 
 .sidebar {
   position: absolute;
-  left: -200px;
   transition: 0.25s;
   margin: 0;
   margin-top: 52px;
   padding: 0;
-  width: 240px;
+  width: 340px;
   background: var(--menu-color);
   color: lightgray;
   position: fixed;
@@ -336,33 +335,22 @@ input:checked + .slider:before {
   border-radius: 50%;
 }
 
-.overlay {
-  display: none;
-  position: fixed;
-  top: -30%;
-  left: 0;
-  width: 100%;
-  height: 130%;
-  background-color: rgba(0, 0, 0, 0.15);
-  color: black;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-}
-
 .open {
   display: flex;
 }
 
 .dialog {
+  position: absolute;
   background-color: var(--menu-color);
   color: var(--font-color);
   border-radius: 6px;
   border: 0.1px solid rgb(63, 66, 65);
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   padding: 12px;
-  width: 600px;
+  width: 800px;
+  max-width: 75%;
   text-align: center;
+  top: 120px;
 }
 
 #searchButton {
diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss
index 68ca5e65..85931090 100644
--- a/webapp/src/styles.scss
+++ b/webapp/src/styles.scss
@@ -95,7 +95,8 @@ pre[class*="language-"] {
 .autocomplete {
   display: flex;
   flex-direction: column;
-  height: 396px;
+  height: 496px;
+  max-height: 75vh;
   overflow-x: hidden;
 }
 
@@ -362,3 +363,15 @@ code {
     transform: rotate(360deg);
   }
 }
+
+.overlay {
+  display: none;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.15);
+  color: black;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}