RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Fixed inconsistent search-to-breadcrumb spacing across all pages

Browse Source 
- **ChapterSelector and BibleReader breadcrumbs**: Changed mb-8 to mb-4
- **BookSelector breadcrumb**: Already had mb-4
- **Consistent vertical spacing**: All pages now have identical gap between search bar and breadcrumbs
- **Visual harmony**: Uniform 16px spacing between search and navigation elements

Search to breadcrumb spacing is now perfectly consistent across Books, Chapters, and Verses pages!
This commit is contained in:
Ryderjj89
2025-09-28 16:27:12 -04:00
parent 69519c988e
commit e20c4ffc1e
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/BibleReader.tsx
View File

@@ -317,7 +317,7 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
</div> </div>
{/* Breadcrumb Navigation */} {/* Breadcrumb Navigation */}
<div className="flex items-center justify-center space-x-1 mb-8"> <div className="flex items-center justify-center space-x-1 mb-4">
<button <button
onClick={() => window.location.href = `/version/${version}`} onClick={() => window.location.href = `/version/${version}`}
className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"

2
frontend/src/components/ChapterSelector.tsx
View File

@@ -160,7 +160,7 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
</div> </div>
{/* Breadcrumb Navigation */} {/* Breadcrumb Navigation */}
<div className="flex items-center justify-center space-x-1 mb-8"> <div className="flex items-center justify-center space-x-1 mb-4">
<button <button
onClick={() => window.location.href = `/version/${version}`} onClick={() => window.location.href = `/version/${version}`}
className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"