oobe improvemnets

- added close and minimize buttons (windows/linux only)
- added drag region to top
- optimized for smaller window sizes

src/renderer/less/pages.less

@@ -1700,6 +1700,10 @@
       overflow-y   : scroll;
       overflow-x   : hidden;
 
+      @media screen and (max-width: 1161px) {
+        font-size: 13px;
+      }
+
       &.text {
         white-space: pre-wrap;
       }
@@ -1729,10 +1733,10 @@
           }
 
           .card-body {
-            padding: 0;
-            display: flex;
+            padding        : 0;
+            display        : flex;
             justify-content: center;
-            align-items: center;
+            align-items    : center;
           }
 
           .card-footer {
@@ -1742,7 +1746,7 @@
             bottom     : 0;
             left       : 0;
             width      : 100%;
-            border:0px;
+            border     : 0px;
             text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
             font-weight: bold;
           }
@@ -1758,6 +1762,10 @@
             z-index   : 1;
             box-shadow: 0px 12px 16px rgb(0 0 0 / 25%);
           }
+
+          @media screen and (max-height: 688px) {
+            width: 270px;
+          }
         }
       }
     }
@@ -1775,6 +1783,71 @@
         text-align: center;
       }
     }
+
+  }
+
+
+  .oobe-titlebar {
+    position          : absolute;
+    top               : 0;
+    left              : 0;
+    height            : 46px;
+    width             : 100%;
+    align-items       : center;
+    justify-content   : right;
+    display           : flex;
+    -webkit-app-region: drag;
+
+    .button-group {
+      -webkit-app-region: no-drag;
+      display           : flex;
+      flex-direction    : row;
+      width             : 100px;
+      height            : 100%;
+      justify-content   : center;
+      align-items       : center;
+      gap               : 16px;
+
+      >button {
+        height         : 32px;
+        width          : 32px;
+        font-size      : 16px;
+        border-radius  : 0px;
+        border         : 0;
+        appearance     : none;
+        position       : relative;
+        display        : flex;
+        justify-content: center;
+        align-items    : center;
+        border-radius  : 100%;
+
+        &.close {
+          background-color: #fc3c44aa;
+          &:hover {
+            background-color: #fc3c44;
+          }
+        }
+
+        &.min {
+          background-color: rgb(200 200 200 / 5%);
+          &:hover {
+            background-color: rgb(200 200 200 / 10%);
+          }
+        }
+
+        &.close::before {
+          font-family: "codicon";
+          content    : "";
+          color      : white;
+        }
+
+        &.min::before {
+          font-family: "codicon";
+          content    : "";
+          color      : white;
+        }
+      }
+    }
   }
 }