fix: let the calendar buttons in settings wrap instead of running past the edge

components/settings/__tests__/calendar-management-phone.test.tsx

@@ -65,4 +65,12 @@ describe('Settings > Calendar on a phone', () => {
     expect(screen.queryByRole('button', { name: 'title' })).toBeNull();
     expect(screen.getByRole('button', { name: 'add_calendar' })).toBeInTheDocument();
   });
+
+  // settings-p2-21: at 800 px the three buttons ran 4 px past the edge.
+  it('lets the New, Import and Subscribe buttons wrap when a row is too narrow', () => {
+    render(<CalendarManagementSettings />);
+    const row = screen.getByTestId('calendar-create-buttons');
+    expect(row.className).toMatch(/(^|\s)sm:flex-wrap(\s|$)/);
+    expect(row.querySelectorAll('button')).toHaveLength(3);
+  });
 });

components/settings/calendar-management-settings.tsx

@@ -858,8 +858,9 @@ export function CalendarManagementSettings() {
             isLoading={isLoading}
           />
         ) : (
-          // Stacked on a phone: side by side the three labels wrapped.
-          <div className="flex flex-col sm:flex-row gap-2">
+          // Stacked on a phone: side by side the three labels wrapped. Too
+          // narrow for all three in a row (800 px), the last one goes under.
+          <div data-testid="calendar-create-buttons" className="flex flex-col sm:flex-row sm:flex-wrap gap-2">
             <button
               type="button"
               onClick={() => setIsCreating(true)}