fix: Adjust footer CSS

[louisescher]

Description

• Adjusts the footer CSS slightly by moving a breakpoint to a lower value. This prevents the footer from showing in mobile mode on devices with a 13" screen.

Summary by CodeRabbit

• Style

  • Updated footer responsive breakpoint so the upper layout switches to column at narrower screen widths (delays mobile layout until smaller viewports).

• Chores

  • Added a release note/changeset recording this footer behavior adjustment for a patch release.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0bf8cdc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@studiocms/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

Adjusted the footer CSS responsive breakpoint from max-width: 1280px to max-width: 1024px and added a changeset file declaring a patch release noting the footer breakpoint change.

Changes

Cohort / File(s)	Summary
Footer CSS Breakpoint packages/studiocms_ui/src/components/Footer/footer.css	Changed media query breakpoint from max-width: 1280px to max-width: 1024px, delaying the column layout until narrower viewports.
Release Changeset .(changeset)/short-bikes-talk.md	Added a patch changeset for @studiocms/ui documenting the footer breakpoint adjustment for 13" screens.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A tiny hop, a CSS thrum,
The footer waits till screens are slim,
A changeset note, a patch to ship,
I nibble pixels on my whim,
Hooray — the layout's neat and prim!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: Adjust footer CSS' accurately describes the main change: a CSS breakpoint adjustment in the footer component to address mobile display on 13-inch screens.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/footer-css

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[github-actions]

Test Results

300 passed

Details

300 tests
734ms
playwright
Run Tests playwright-test-report #259
fix: Adjust footer CSS #156

Suites

300 passed, 0 failed, and 0 other

Suite	Passed	Failed	Other	Duration
✅ packages/studiocms_ui/test/components/Accordion.e2e.ts         ✅ Test Functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Test Functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	15.7s
✅ packages/studiocms_ui/test/components/Alert.e2e.ts         ✅ Basic functionality         ✅ Renders all variant alerts         ✅ Renders alert content correctly         ✅ Renders with correct variant icons         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Basic functionality         ✅ Renders all variant alerts         ✅ Renders alert content correctly         ✅ Renders with correct variant icons         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)	✅ 16	❌ 0	⏭️ 0	14.6s
✅ packages/studiocms_ui/test/components/Badge.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Test Accessibility - Colors Styling (Dark Mode)         ✅ Test Accessibility - Colors Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Test Accessibility - Colors Styling (Dark Mode)         ✅ Test Accessibility - Colors Styling (Light Mode)	✅ 14	❌ 0	⏭️ 0	19.6s
✅ packages/studiocms_ui/test/components/Breadcrumbs.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.5s
✅ packages/studiocms_ui/test/components/Button.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Test Accessibility - Polymorphic Styling (Dark Mode)         ✅ Test Accessibility - Polymorphic Styling (Light Mode)         ✅ Test Accessibility - Colors Styling (Dark Mode)         ✅ Test Accessibility - Colors Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Test Accessibility - Polymorphic Styling (Dark Mode)         ✅ Test Accessibility - Polymorphic Styling (Light Mode)         ✅ Test Accessibility - Colors Styling (Dark Mode)         ✅ Test Accessibility - Colors Styling (Light Mode)	✅ 18	❌ 0	⏭️ 0	28.5s
✅ packages/studiocms_ui/test/components/Card.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Test Accessibility - Slot Styling (Dark Mode)         ✅ Test Accessibility - Slot Styling (Light Mode)         ✅ Test Accessibility - Polymorphic Styling (Dark Mode)         ✅ Test Accessibility - Polymorphic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Test Accessibility - Slot Styling (Dark Mode)         ✅ Test Accessibility - Slot Styling (Light Mode)         ✅ Test Accessibility - Polymorphic Styling (Dark Mode)         ✅ Test Accessibility - Polymorphic Styling (Light Mode)	✅ 18	❌ 0	⏭️ 0	27.7s
✅ packages/studiocms_ui/test/components/Center.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.6s
✅ packages/studiocms_ui/test/components/Checkbox.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Color Styling (Dark Mode)         ✅ Test Accessibility - Color Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Color Styling (Dark Mode)         ✅ Test Accessibility - Color Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	14.7s
✅ packages/studiocms_ui/test/components/Divider.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.6s
✅ packages/studiocms_ui/test/components/Dropdown.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.9s
✅ packages/studiocms_ui/test/components/Footer.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	8.6s
✅ packages/studiocms_ui/test/components/Group.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Button Group Styling (Dark Mode)         ✅ Test Accessibility - Button Group Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Button Group Styling (Dark Mode)         ✅ Test Accessibility - Button Group Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	13.8s
✅ packages/studiocms_ui/test/components/Icon.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.3s
✅ packages/studiocms_ui/test/components/Input.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - With Icon Styling (Dark Mode)         ✅ Test Accessibility - With Icon Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - With Icon Styling (Dark Mode)         ✅ Test Accessibility - With Icon Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	14.0s
✅ packages/studiocms_ui/test/components/Modal.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.9s
✅ packages/studiocms_ui/test/components/Progress.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Color Styling (Dark Mode)         ✅ Test Accessibility - Color Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Color Styling (Dark Mode)         ✅ Test Accessibility - Color Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	14.3s
✅ packages/studiocms_ui/test/components/RadioGroup.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Color Styling (Dark Mode)         ✅ Test Accessibility - Color Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Color Styling (Dark Mode)         ✅ Test Accessibility - Color Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	13.4s
✅ packages/studiocms_ui/test/components/Row.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.3s
✅ packages/studiocms_ui/test/components/SearchSelect.e2e.ts         ✅ Basic functionality         ✅ Multi-Select functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Multi-Select Styling (Dark Mode)         ✅ Test Accessibility - Multi-Select Styling (Light Mode)         ✅ Basic functionality         ✅ Multi-Select functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Multi-Select Styling (Dark Mode)         ✅ Test Accessibility - Multi-Select Styling (Light Mode)	✅ 12	❌ 0	⏭️ 0	14.8s
✅ packages/studiocms_ui/test/components/Select.e2e.ts         ✅ Basic functionality         ✅ Multiple functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Multiple Styling (Dark Mode)         ✅ Test Accessibility - Multiple Styling (Light Mode)         ✅ Basic functionality         ✅ Multiple functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Multiple Styling (Dark Mode)         ✅ Test Accessibility - Multiple Styling (Light Mode)	✅ 12	❌ 0	⏭️ 0	14.3s
✅ packages/studiocms_ui/test/components/Sidebar-double.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.3s
✅ packages/studiocms_ui/test/components/Sidebar-single.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.6s
✅ packages/studiocms_ui/test/components/Skeleton.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Test Accessibility - Width/Height Styling (Dark Mode)         ✅ Test Accessibility - Width/Height Styling (Light Mode)         ✅ Test Accessibility - Radius Styling (Dark Mode)         ✅ Test Accessibility - Radius Styling (Light Mode)         ✅ Test Accessibility - Direction Styling (Dark Mode)         ✅ Test Accessibility - Direction Styling (Light Mode)         ✅ Test Accessibility - Horizontal Alignment Styling (Dark Mode)         ✅ Test Accessibility - Horizontal Alignment Styling (Light Mode)         ✅ Test Accessibility - Vertical Alignment Styling (Dark Mode)         ✅ Test Accessibility - Vertical Alignment Styling (Light Mode)         ✅ Test Accessibility - Gap Styling (Dark Mode)         ✅ Test Accessibility - Gap Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Test Accessibility - Width/Height Styling (Dark Mode)         ✅ Test Accessibility - Width/Height Styling (Light Mode)         ✅ Test Accessibility - Radius Styling (Dark Mode)         ✅ Test Accessibility - Radius Styling (Light Mode)         ✅ Test Accessibility - Direction Styling (Dark Mode)         ✅ Test Accessibility - Direction Styling (Light Mode)         ✅ Test Accessibility - Horizontal Alignment Styling (Dark Mode)         ✅ Test Accessibility - Horizontal Alignment Styling (Light Mode)         ✅ Test Accessibility - Vertical Alignment Styling (Dark Mode)         ✅ Test Accessibility - Vertical Alignment Styling (Light Mode)         ✅ Test Accessibility - Gap Styling (Dark Mode)         ✅ Test Accessibility - Gap Styling (Light Mode)	✅ 34	❌ 0	⏭️ 0	51.9s
✅ packages/studiocms_ui/test/components/Tabs.e2e.ts         ✅ Basic functionality         ✅ Sync functionality         ✅ Nested functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Sync Styling (Dark Mode)         ✅ Test Accessibility - Sync Styling (Light Mode)         ✅ Test Accessibility - Nested Styling (Dark Mode)         ✅ Test Accessibility - Nested Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)         ✅ Basic functionality         ✅ Sync functionality         ✅ Nested functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Sync Styling (Dark Mode)         ✅ Test Accessibility - Sync Styling (Light Mode)         ✅ Test Accessibility - Nested Styling (Dark Mode)         ✅ Test Accessibility - Nested Styling (Light Mode)         ✅ Test Accessibility - Variant Styling (Dark Mode)         ✅ Test Accessibility - Variant Styling (Light Mode)	✅ 22	❌ 0	⏭️ 0	28.2s
✅ packages/studiocms_ui/test/components/Textarea.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.6s
✅ packages/studiocms_ui/test/components/Toast.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.2s
✅ packages/studiocms_ui/test/components/Toggle.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Color Styling (Dark Mode)         ✅ Test Accessibility - Color Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Test Accessibility - Color Styling (Dark Mode)         ✅ Test Accessibility - Color Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	14.5s
✅ packages/studiocms_ui/test/components/Tooltip.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.7s
✅ packages/studiocms_ui/test/components/User.e2e.ts         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)         ✅ Basic functionality         ✅ Test Accessibility - Basic Styling (Dark Mode)         ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.1s

Github Test Reporter by CTRF 💚

🔄 This comment has been updated

[pkg-pr-new]

npm i https://pkg.pr.new/withstudiocms/ui/@studiocms/ui@156

commit: 0bf8cdc