Polish Data Map mobile layout

frontend/README.md

@@ -4,6 +4,8 @@ React + TypeScript + MapLibre foundation for project/area/dataset workflow.
 
 The workbench now uses a task-based shell instead of a single long panel stack. `App.tsx` still owns shared orchestration state, but the UI is organized into Overview, Data, Map, QA/QC, AI Labs, Exports and System workspaces with a persistent top context bar and right-side dataset inspector.
 
+Data and Map workspaces include mobile-density CSS for file inputs, dataset action buttons, map toolbar controls, range sliders and empty-map quick actions so narrow screens avoid accidental viewport overflow.
+
 ## Scope implemented
 - API client layer (`src/services/api`)
 - Project and area list/create flows

frontend/src/styles/app.css

@@ -284,9 +284,11 @@ section {
   gap: 0.5rem;
   align-items: center;
   margin-top: 0.72rem;
+  min-width: 0;
 }
 
 .checkbox-row input {
+  flex: 0 0 auto;
   width: auto;
   min-height: auto;
   margin: 0;
@@ -951,6 +953,19 @@ section th {
   background: var(--panel-soft);
 }
 
+.dataset-upload-form label,
+.file-input-label {
+  min-width: 0;
+}
+
+.file-input-label input[type='file'] {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .data-density-grid {
   border: 1px solid var(--line);
   border-radius: 7px;
@@ -1173,6 +1188,7 @@ button.entity-card {
   min-height: 3.25rem;
   margin-top: 0;
   text-align: left;
+  touch-action: pan-x;
 }
 
 .dataset-action-button span,
@@ -1424,17 +1440,19 @@ button.entity-card {
 
 .map-empty-action-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
   gap: 0.55rem;
   margin-top: 0.5rem;
 }
 
 .map-empty-action-grid button {
   display: grid;
+  min-width: 0;
   min-height: 4.2rem;
   gap: 0.18rem;
   margin-top: 0;
   text-align: left;
+  touch-action: pan-x;
 }
 
 .map-empty-action-grid span,
@@ -1646,7 +1664,7 @@ button.entity-card {
 
 .map-toolbar {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
   gap: 0.75rem;
   align-items: end;
   margin-bottom: 0.85rem;
@@ -1655,17 +1673,22 @@ button.entity-card {
 .layer-control-card {
   display: grid;
   gap: 0.5rem;
+  min-width: 0;
   padding: 0.58rem 0.65rem;
 }
 
 .layer-control-card input[type='range'] {
+  width: 100%;
+  min-width: 0;
   min-height: auto;
   padding: 0;
+  touch-action: pan-x;
 }
 
 .map-status {
   display: grid;
   gap: 0.25rem;
+  min-width: 0;
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 0.62rem 0.72rem;
@@ -2029,4 +2052,32 @@ button.entity-card {
   .status-strip-grid {
     grid-template-columns: 1fr;
   }
+
+  .dataset-upload-form {
+    gap: 0.55rem;
+    padding: 0.68rem;
+  }
+
+  .dataset-action-grid,
+  .map-empty-action-grid {
+    grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
+  }
+
+  .dataset-action-button,
+  .map-empty-action-grid button {
+    min-height: 3rem;
+    padding: 0.48rem 0.56rem;
+  }
+
+  .map-toolbar {
+    gap: 0.55rem;
+  }
+
+  .layer-control-card {
+    padding: 0.52rem 0.58rem;
+  }
+
+  .workbench-main .map-container {
+    height: 22rem;
+  }
 }