diff --git a/components/settings/__tests__/calendar-management-phone.test.tsx b/components/settings/__tests__/calendar-management-phone.test.tsx
index 79b296605..efee10a90 100644
--- a/components/settings/__tests__/calendar-management-phone.test.tsx
+++ b/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);
+  });
 });
diff --git a/components/settings/calendar-management-settings.tsx b/components/settings/calendar-management-settings.tsx
index 472b72417..7e3687090 100644
--- a/components/settings/calendar-management-settings.tsx
+++ b/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)}