Fix mobile viewport issues for welcome message and editor

- Changed welcome message to use height: 100% with top/right/bottom/left positioning instead of min-height
- Added overflow-x: hidden to prevent horizontal scrolling
- Added flex-shrink: 0 to welcome-content to prevent content compression
- Changed mobile layout to align-items: flex-start with padding-top for better positioning
- Reduced mobile title size from 36px to 32px for better fit
- Added toolbar responsive styles - hide labels and reduce padding on mobile
- Added toolbar-button responsive sizing for mobile
- All content now properly fits within mobile viewports without being cut off

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

packages/learningmap/src/index.css

@@ -700,15 +700,18 @@ dialog.help[open] {
   position: absolute;
   top: 0;
   left: 0;
+  right: 0;
+  bottom: 0;
   width: 100%;
-  min-height: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffffff;
   z-index: 1;
   pointer-events: none;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .welcome-content {
@@ -718,6 +721,7 @@ dialog.help[open] {
   padding: 40px 20px;
   pointer-events: auto;
   box-sizing: border-box;
+  flex-shrink: 0;
 }
 
 .welcome-title {
@@ -750,8 +754,26 @@ dialog.help[open] {
 
 /* Responsive adjustments for mobile */
 @media (max-width: 640px) {
+  .editor-toolbar {
+    padding: 8px 12px;
+  }
+
+  .toolbar-button {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .toolbar-label {
+    display: none;
+  }
+
+  .welcome-message {
+    align-items: flex-start;
+    padding-top: 20px;
+  }
+
   .welcome-title {
-    font-size: 36px;
+    font-size: 32px;
   }
 
   .welcome-content {
@@ -760,10 +782,12 @@ dialog.help[open] {
 
   .welcome-subtitle {
     font-size: 14px;
+    margin: 0 0 24px 0;
   }
 
   .welcome-actions button {
     max-width: 100%;
     font-size: 14px;
+    padding: 10px 20px;
   }
 }