Update static/css/style.css

static/css/style.css

@@ -65,6 +65,7 @@ body {
 
 .toolbar-content {
   display: flex;
+  flex-direction: row;
   gap: 20px;
   padding: 10px;
 }
@@ -168,4 +169,110 @@ body {
 
 .submit-btn:hover {
   background: #388E3C;
-}
+}
+
+@media (max-width: 950px) {
+  .bottom-toolbar {
+    left: 0;
+    bottom: 0;
+    transform: translateX(0);
+    width: auto;
+    border-radius: 0 8px 8px 0;
+    padding: 10px;
+  }
+
+  .toolbar-content {
+    flex-direction: column;
+    width: auto;
+    gap: 10px;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .tool-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 5px 0;
+    border-right: none;
+  }
+
+  .tool-group:last-child {
+    border-right: none;
+  }
+
+  .tool-btn {
+    font-size: 16px;
+    padding: 8px;
+    width: 100%;
+  }
+
+  .tool-btn .material-icons {
+    font-size: 18px;
+  }
+
+  #colorPicker,
+  #brushSize {
+    width: 50px;
+    height: 50px;
+    margin: 0 auto;
+  }
+
+  #brushSizeLabel {
+    font-size: 12px;
+  }
+
+  .action-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: auto;
+    justify-content: flex-start;
+  }
+
+  .action-btn {
+    font-size: 12px;
+    padding: 6px 12px;
+    width: 100%;
+  }
+
+  .page-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: auto;
+    align-items: flex-start;
+  }
+
+  #pageInfo {
+    font-size: 12px;
+    min-width: 60px;
+    text-align: center;
+  }
+
+  .page-controls .action-btn {
+    font-size: 14px;
+    padding: 8px 12px;
+    width: 100%;
+  }
+
+  #whiteboard {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .whiteboard-container {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .submit-btn,
+  .ai-btn,
+  .clear-btn {
+    font-size: 14px;
+    padding: 8px 16px;
+    width: 100%;
+  }
+}
+