fix: show Back Home button on tablets and phones

[ildyria]

Fixes #4233

Summary by CodeRabbit

• Improvements
  • Back link button is now visible on mobile devices, previously shown only on desktop screens.
  • Updated responsive layout breakpoints for consistent visibility across all screen sizes.
  • Enhanced button spacing and positioning for guest users.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes restructure back link button positioning and visibility across header components. BackLinkButton moves from large-screen-only containers to always-rendered sections in AlbumsHeader and TimelineHeader, responsive breakpoints shift from sm to lg in BackLinkButton itself, and guest-user detection is simplified using userStore.isGuest.

Changes

Cohort / File(s)	Summary
Header Component Restructuring resources/js/components/headers/AlbumsHeader.vue, resources/js/components/headers/TimelineHeader.vue	BackLinkButton repositioned from hidden lg:block desktop-only sections to always-rendered toolbar areas, enabling display on all screen sizes. AlbumsHeader adds responsive spacing wrapper and simplifies guest detection from userStore.user?.id === null to userStore.isGuest.
BackLinkButton Breakpoint Updates resources/js/components/headers/BackLinkButton.vue	Responsive visibility thresholds adjusted from sm breakpoint to lg breakpoint, changing when home icon and back text toggle visibility across screen sizes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Back buttons hop from lg-only nests,
Now visible to guests on every quest,
From sm to lg, the breakpoints gleam,
Responsive layouts dance and beam,
Simpler checks guide rabbit's way! 🔙

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
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.}

---

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

resources/js/components/headers/AlbumsHeader.vue (1)

59-62: Scope the spacer wrapper to the same condition as BackLinkButton.

Line 60 always renders mr-12 on mobile even when the user is not a guest. Consider moving the condition to the wrapper so empty spacing is not added unnecessarily.

♻️ Proposed refactor

-			<div class="mr-12 lg:mr-0">
-				<BackLinkButton v-if="userStore.isGuest && albumsStore.rootConfig" :config="albumsStore.rootConfig" />
-			</div>
+			<div v-if="userStore.isGuest && albumsStore.rootConfig" class="mr-12 lg:mr-0">
+				<BackLinkButton :config="albumsStore.rootConfig" />
+			</div>

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f3689731-9114-475a-bf8f-393a09b0815e

📥 Commits

Reviewing files that changed from the base of the PR and between 5c67a33 and a9998f3.

📒 Files selected for processing (3)

• resources/js/components/headers/AlbumsHeader.vue
• resources/js/components/headers/BackLinkButton.vue
• resources/js/components/headers/TimelineHeader.vue