fix(ui): fix overlapping header elements on narrow screens (#31)

- Calendar toolbar now wraps view buttons to a second row on viewports
  < 580px so nav controls and label stay readable on all iOS devices
- Tasks toolbar title no longer bleeds over action buttons; uses
  min-width:min-content so flex-wrap kicks in before overflow occurs
- Shopping list-header name gets flex:1/overflow:hidden so it truncates
  cleanly instead of colliding with the clear-checked / delete buttons

public/styles/shopping.css

@@ -124,6 +124,9 @@
   align-items: center;
   gap: var(--space-2);
   color: var(--color-text-primary);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .list-header__edit-icon {
@@ -136,6 +139,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-2);
+  flex-shrink: 0;
 }
 
 /* --------------------------------------------------------