Bug Fixes - Fixed title overlapping with border and screen resizing issues

[devJim03]

Fixed churchill layout's title issue

When the churchill layout was selected with a unsplash or any background source, the quotes border would overlap with the title when pasted into a README.

Added a conditional check to move the title down if the background source isn't empty.

Fixed the marquee style so that is centered on small screen devices

The spacing between the left and right edges of the marquee to the screen border wasn't consistent

Set display to block so that it'll center with the middle of the screen

Fixed the css styling for the border color field and the unsplash query field

Both fields were unresponsive to smaller screen sizes and left aligned. Also between 650 and 650 px the two columns would overlap each other.

Removed margins:300px from each container and updated unsplash querys textfield to fill its width

Closes #361

Summary by CodeRabbit

• Style

  • Input fields now adapt responsively instead of fixed widths.
  • Search input expands to full width for better layout responsiveness.
  • Title styling dynamically adjusts based on background images for improved visual consistency.

• Refactor

  • Internal code structure improvements with no user-facing impact.

[vercel]

Someone is attempting to deploy a commit to the shravan20's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Three focused changes improve code maintainability and layout responsiveness: removing hard-coded width constraints from form components to enable fluid layouts, converting an implicit global assignment to explicit const declaration for consistency, and implementing dynamic title styling conditional on background image presence in the Churchill layout.

Changes

Cohort / File(s)	Summary
Responsive Form Styling frontend/src/components/Pages/Home/index.js	Removed fixed 300px width constraints from Autocomplete and TextField components, replaced Unsplash query field with full-width sizing (width: '100%'), and added display: 'block' to marquee element for improved responsive layout behavior.
Code Style Consistency src/api/services/quotesService.js	Changed getQuoteIndex declaration from implicit global assignment to explicit const declaration; logic and behavior unchanged.
Dynamic Title Styling src/layouts/layout.js	Introduced conditional title styling in Churchill layout that derives titleBackground and titleTopPosition from template background image, making title appearance adapt based on whether a background image is present.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Home/index.js: Repetitive styling removals follow a consistent pattern; verify no layout regressions in responsive breakpoints.
• quotesService.js: Straightforward declaration change; confirm no implicit global references remain.
• layout.js: Verify conditional styling logic correctly handles both bgImage present and absent states; check title positioning calculations across viewport sizes.

Poem

🐰 No more boxes, wide and free!
Our components now flow like thee—
Responsive, styled with grace so bright,
Layout dances left and right!
A rabbit's leap to code more right. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main focus of the changeset - it addresses bug fixes for title overlapping and screen resizing responsiveness issues, which align with the three primary changes: churchill layout title positioning, marquee centering, and form field responsiveness.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}