add window resizing (#156)

src/components/windows.js

@@ -41,11 +41,13 @@ class AppWindow extends HTMLElement {
             }
 
             :host {
+                display: flex;
+                flex-direction: column;
                 position: absolute;
                 min-width: 200px;
                 min-height: 120px;
-                display: flex;
-                flex-direction: column;
+                resize: both;
+                overflow: hidden;
                 border: 1px var(--color-border) solid;
                 border-radius: 8px 8px 0 0;
             }
@@ -133,8 +135,10 @@ class AppWindow extends HTMLElement {
             :host(.fullscreen) {
                 top: 0px !important;
                 left: 0px !important;
-                width: 100% !important;
-                height: calc(100vh - var(--taskbar-height)) !important;
+                width: 100vw !important;
+
+                /* height: 100vh - 50px (taskbar height) */
+                height: calc(100vh - 50px) !important;
                 border-radius: 0;
                 z-index: 3900;
             }
@@ -332,7 +336,7 @@ function handleWindowDrag(windowElement) {
             if(x < 0) x = 0;  // don't let the window go outside the left edge of the screen
             if(y < 0) y = 0;  // don't let the window go outside the top edge of the screen
 
-            if(y > (desktop.offsetHeight - 50)) y = desktop.offsetHeight - 50;  // don't let the window go outside the bottom edge of the screen
+            if(y > (desktop.offsetHeight - 100)) y = desktop.offsetHeight - 100;  // don't let the window go outside the bottom edge of the screen
             if(x > (desktop.offsetWidth - 100)) x = desktop.offsetWidth - 100;  // don't let the window go outside the right edge of the screen
 
             windowElement.style.left = x + 'px';

src/css/taskbar.css

@@ -13,7 +13,8 @@
     bottom: 0;
     width: 100vw;
     height: 55px;
-    padding: 8px;    
+    padding: 8px;  
+    z-index: 5000;  
 }
 
 

src/css/window-defaults.css

@@ -10,9 +10,14 @@ body.window-dragging iframe {
 
 /* WEBSITE */
 app-window.website {
-    width: 600px;
-    height: 400px;
     --color-background--body: var(--color-background--head);
+}    
+
+@media screen and (min-width: 600px) {
+    app-window.website {
+        width: 600px;
+        height: 400px;
+    }    
 }
 
 app-window.website iframe {

src/js/state/menubar.js

@@ -2,7 +2,7 @@ import state from '/modules/state.js';
 
 (() => {
     const update = () => {
-        const configShow = state.get('menubar', true);
+        const configShow = state.get('menubar', false);
         const configFloating = state.get('menubar.floating', true);
 
         const menubar = document.querySelector('.menubar');