style: enhance mobile responsiveness and touch targets across components

src/app/app.component.css

@@ -3,29 +3,83 @@
   height: 100%;
 }
 
+/* Mobile-first: full-width container with horizontal padding */
+.container {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 12px;
+}
+
 .board-header {
-  padding: 16px 0 12px;
+  padding: 14px 0 10px;
   border-bottom: 3px solid #5ba4cf;
   margin-bottom: 0;
 }
 
 .board-header h1 {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   font-weight: 600;
   color: #172b4d;
   margin: 0;
+  /* Prevent long titles from overflowing */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+/* Mobile-first: columns stack vertically, full-width */
 .board {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
-  gap: 16px;
+  gap: 12px;
-  padding: 20px 0;
+  padding: 12px 0;
-  overflow-x: auto;
+  height: auto;
-  height: calc(100% - 60px);
+  min-height: 0;
 }
 
 .board-col {
-  flex: 0 0 320px;
+  flex: 1 1 auto;
-  max-height: 100%;
+  width: 100%;
+  max-height: none;
+}
+
+/* Tablet+: switch to horizontal scrolling board */
+@media (min-width: 600px) {
+  .container {
+    padding: 0 16px;
+  }
+
+  .board-header h1 {
+    font-size: 1.4rem;
+  }
+
+  .board {
+    flex-direction: row;
+    align-items: flex-start;
+    overflow-x: auto;
+    height: calc(100% - 60px);
+    gap: 16px;
+    padding: 20px 0;
+    /* Smooth scroll on touch devices */
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Fixed-width columns on tablet+ */
+  .board-col {
+    flex: 0 0 300px;
+    max-height: 100%;
+    width: auto;
+  }
+}
+
+/* Desktop+: wider columns */
+@media (min-width: 960px) {
+  .container {
+    padding: 0 24px;
+  }
+
+  .board-col {
+    flex: 0 0 320px;
+  }
 }

src/app/card/card.component.css

@@ -6,15 +6,22 @@
   font-size: 0.9rem;
   font-weight: 600;
   color: #172b4d;
+  /* Prevent overflow on narrow screens */
+  min-width: 0;
 }
 
+/* Caret toggle — 44px touch target for mobile */
 .carret {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
   color: #5e6c84;
   font-size: 0.85rem;
-  padding: 2px;
+  min-width: 44px;
-  border-radius: 3px;
+  min-height: 44px;
+  border-radius: 4px;
+  flex-shrink: 0;
 }
 .carret:hover {
   background-color: rgba(9, 30, 66, 0.08);
@@ -23,9 +30,12 @@
 .titleText {
   flex: 1;
   cursor: pointer;
-  padding: 2px 4px;
+  padding: 8px 4px;
   border-radius: 4px;
   line-height: 1.3;
+  min-width: 0;
+  /* Allow long titles to wrap on mobile */
+  word-break: break-word;
 }
 .titleText:hover {
   background-color: rgba(9, 30, 66, 0.08);
@@ -43,21 +53,22 @@
   font-size: 0.82rem;
   color: #5e6c84;
   cursor: pointer;
-  padding: 3px 5px;
+  padding: 8px 5px;
   border-radius: 4px;
   line-height: 1.4;
+  word-break: break-word;
 }
 .cardDesc:hover {
   background-color: rgba(9, 30, 66, 0.08);
 }
 
-/* Edit inputs */
+/* Edit inputs — mobile-friendly sizing */
 .edit-input {
   width: 100%;
-  padding: 5px 7px;
+  padding: 8px 10px;
   border: 2px solid #5ba4cf;
   border-radius: 4px;
-  font-size: inherit;
+  font-size: 16px; /* 16px prevents iOS auto-zoom on input focus */
   font-family: inherit;
   box-sizing: border-box;
   outline: none;
@@ -79,7 +90,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 3px 0;
+  padding: 6px 0;
   font-size: 0.82rem;
   color: #172b4d;
 }
@@ -89,18 +100,35 @@
   color: #b0b8c4;
 }
 
-.task-text {
+/* Enlarge checkbox for touch */
-  flex: 1;
+.task-item input[type="checkbox"] {
+  min-width: 20px;
+  min-height: 20px;
+  flex-shrink: 0;
 }
 
+.task-text {
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+
+/* Trash icon — 44px touch target, always visible on touch devices */
 .task-trash {
   color: #b0b8c4;
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: 0.85rem;
-  padding: 2px 4px;
+  padding: 10px 8px;
-  border-radius: 3px;
+  border-radius: 4px;
-  opacity: 0;
+  flex-shrink: 0;
-  transition: opacity 0.15s, color 0.15s;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s;
+  /* Always visible on touch devices since there's no hover */
+  opacity: 0.6;
 }
 .task-item:hover .task-trash {
   opacity: 1;
@@ -118,8 +146,9 @@
   border: none;
   border-bottom: 1px solid #dfe1e6;
   border-radius: 0;
-  font-size: 0.82rem;
+  /* 16px prevents iOS auto-zoom */
-  padding: 4px 2px;
+  font-size: 16px;
+  padding: 8px 2px;
   background: transparent;
   width: 100%;
   box-sizing: border-box;
@@ -129,7 +158,7 @@
   outline: none;
 }
 
-/* Delete Modal */
+/* Delete Modal — mobile-first bottom-sheet style */
 .modal-backdrop-overlay {
   position: fixed;
   inset: 0;
@@ -142,7 +171,7 @@
   position: fixed;
   inset: 0;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
   z-index: 101;
   pointer-events: none;
@@ -151,10 +180,11 @@
 
 .delete-modal-overlay .create-card-modal {
   pointer-events: auto;
-  width: 340px;
+  width: 100%;
+  max-width: 100vw;
   background: #fff;
-  border-radius: 12px;
+  border-radius: 12px 12px 0 0;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25);
   overflow: hidden;
   cursor: default;
 }
@@ -165,8 +195,7 @@
   justify-content: space-between;
   padding: 12px 16px;
   background-color: #e44;
-  border-top-left-radius: 12px;
+  border-radius: 12px 12px 0 0;
-  border-top-right-radius: 12px;
   color: white;
   font-weight: bold;
 }
@@ -178,8 +207,9 @@
   color: #fff;
   opacity: 0.8;
   font-size: 1rem;
-  width: 28px;
+  /* 44px touch target */
-  height: 28px;
+  min-width: 44px;
+  min-height: 44px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, 0.2);
@@ -193,14 +223,12 @@
   background: rgba(255, 255, 255, 0.35);
   opacity: 1;
 }
-.modal-header .close:hover {
-  opacity: 1;
-}
 
 .modal-body p {
   margin: 0 0 12px;
   color: #172b4d;
   font-size: 0.9rem;
+  word-break: break-word;
 }
 
 .modal-actions {
@@ -213,10 +241,11 @@
   color: #fff;
   border: none;
   border-radius: 6px;
-  padding: 8px 20px;
+  padding: 10px 20px;
   font-weight: 600;
   font-size: 0.85rem;
   cursor: pointer;
+  min-height: 44px;
   transition: background-color 0.15s;
 }
 .btn-delete:hover {
@@ -228,12 +257,31 @@
   color: #5e6c84;
   border: none;
   border-radius: 6px;
-  padding: 8px 20px;
+  padding: 10px 20px;
   font-weight: 600;
   font-size: 0.85rem;
   cursor: pointer;
+  min-height: 44px;
   transition: background-color 0.15s;
 }
 .btn-cancel:hover {
   background: #ebecf0;
 }
+
+/* Tablet+: centered modal instead of bottom-sheet */
+@media (min-width: 600px) {
+  .delete-modal-overlay {
+    align-items: center;
+  }
+
+  .delete-modal-overlay .create-card-modal {
+    width: 340px;
+    max-width: 90vw;
+    border-radius: 12px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+  }
+
+  .modal-header {
+    border-radius: 12px 12px 0 0;
+  }
+}

src/app/cardlist/cardlist.component.css

@@ -2,7 +2,8 @@
 .column-panel {
   background: #ebecf0;
   border-radius: 12px;
-  max-height: calc(100vh - 140px);
+  /* Fluid height: fills column on mobile, capped on desktop */
+  max-height: none;
   display: flex;
   flex-direction: column;
 }
@@ -20,6 +21,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  /* Allow title to truncate if space is tight */
+  min-width: 0;
+  flex: 1;
 }
 
 .column-dot {
@@ -30,6 +34,10 @@
   font-weight: 700;
   font-size: 0.95rem;
   color: #172b4d;
+  /* Truncate long column names on small screens */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .column-count {
@@ -39,18 +47,25 @@
   padding: 1px 8px;
   font-size: 0.75rem;
   font-weight: 600;
+  flex-shrink: 0;
 }
 
-/* Add button */
+/* Add button — enlarged touch target for mobile (44px min) */
 .add-card-btn {
   background: none;
   border: none;
   color: #5e6c84;
   cursor: pointer;
-  padding: 4px 8px;
+  /* 44px touch target area */
+  padding: 10px 12px;
   border-radius: 6px;
   font-size: 0.85rem;
   transition: background-color 0.15s, color 0.15s;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .add-card-btn:hover {
   background-color: rgba(9, 30, 66, 0.08);
@@ -63,6 +78,8 @@
   overflow-y: auto;
   padding: 4px 8px 8px;
   min-height: 60px;
+  /* Limit height on mobile so stacked columns don't push everything off-screen */
+  max-height: 50vh;
 }
 
 .card-list {
@@ -76,7 +93,7 @@
   border-radius: 8px;
   border-left-width: 4px;
   border-left-style: solid;
-  padding: 8px 10px;
+  padding: 10px 12px;
   margin-bottom: 8px;
   cursor: grab;
   box-shadow: 0 1px 2px rgba(9, 30, 66, 0.1);
@@ -86,7 +103,7 @@
   box-shadow: 0 4px 12px rgba(9, 30, 66, 0.15);
 }
 
-/* Create Card Modal */
+/* Create Card Modal — mobile-first: full-width with margin */
 .modal-backdrop-overlay {
   position: fixed;
   inset: 0;
@@ -98,18 +115,20 @@
   position: fixed;
   inset: 0;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
   z-index: 101;
   pointer-events: none;
+  /* Slide-up modal feel on mobile */
+  padding: 0;
 }
 
 .create-card-modal {
   background: #fff;
-  border-radius: 12px;
+  border-radius: 12px 12px 0 0;
-  width: 400px;
+  width: 100%;
-  max-width: 90vw;
+  max-width: 100vw;
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   pointer-events: auto;
 }
@@ -126,12 +145,23 @@
   font-size: 1rem;
   font-weight: 600;
   margin: 0;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+/* Close button — 44px touch target */
 .modal-close-btn {
   cursor: pointer;
   opacity: 0.85;
   font-size: 1.1rem;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .modal-close-btn:hover {
   opacity: 1;
@@ -153,7 +183,9 @@
   border: 2px solid #dfe1e6;
   border-radius: 6px;
   font-size: 0.9rem;
-  padding: 8px 10px;
+  /* Larger padding for easier touch input */
+  padding: 10px 12px;
+  width: 100%;
   transition: border-color 0.15s;
 }
 .modal-form .form-control:focus {
@@ -172,15 +204,17 @@
   margin-top: 16px;
 }
 
+/* Buttons — 44px min-height for touch targets */
 .btn-create {
   background: #5ba4cf;
   color: #fff;
   border: none;
   border-radius: 6px;
-  padding: 8px 20px;
+  padding: 10px 20px;
   font-weight: 600;
   font-size: 0.85rem;
   cursor: pointer;
+  min-height: 44px;
   transition: background-color 0.15s;
 }
 .btn-create:hover {
@@ -192,16 +226,39 @@
   color: #5e6c84;
   border: none;
   border-radius: 6px;
-  padding: 8px 20px;
+  padding: 10px 20px;
   font-weight: 600;
   font-size: 0.85rem;
   cursor: pointer;
+  min-height: 44px;
   transition: background-color 0.15s;
 }
 .btn-cancel:hover {
   background: #ebecf0;
 }
 
+/* Tablet+: center the modal instead of bottom-sheet */
+@media (min-width: 600px) {
+  .card-drop-zone {
+    max-height: calc(100vh - 140px);
+  }
+
+  .column-panel {
+    max-height: calc(100vh - 140px);
+  }
+
+  .modal-overlay {
+    align-items: center;
+  }
+
+  .create-card-modal {
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90vw;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+  }
+}
+
 /* CDK Drag-Drop */
 .cdk-drop-list-receiving .card-drop-zone {
   background-color: rgba(91, 164, 207, 0.1);

src/styles.css

@@ -1,7 +1,16 @@
-/* Global styles */
+/* Global styles — mobile-first base */
 html, body {
   height: 100%;
   margin: 0;
   background-color: #f4f5f7;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  /* Prevent horizontal overflow from any element */
+  overflow-x: hidden;
+  /* Use border-box globally so padding never causes overflow */
+  box-sizing: border-box;
+}
+
+/* Ensure all children inherit border-box */
+*, *::before, *::after {
+  box-sizing: inherit;
 }