Change layout direction to column and update padding

Changed layout direction of main container to column and adjusted sidebar padding.

Author: NovaDev404

web/styles.css

@@ -15,7 +15,7 @@ main {
   border-radius: 3dvw;
   overflow: hidden;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 }
 
 .header-bar {
@@ -27,9 +27,7 @@ main {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  position: absolute;
-  top: 0;
-  left: 0;
+  flex-shrink: 0;
 }
 
 .app-title {
@@ -52,15 +50,21 @@ main {
   border-radius: 50%;
 }
 
+.content-area {
+  display: flex;
+  height: calc(100% - 5dvh);
+  width: 100%;
+}
+
 .sidebar {
   background-color: #e5e5e5;
   width: 20dvw;
   height: 100%;
-  padding-top: 7dvh;
   display: flex;
   flex-direction: column;
   font-family: "Aptos", "Arial", sans-serif;
   gap: 3dvh;
+  padding-top: 3dvh;
 }
 
 .sidebar-item {