feat: responsive layout for mobile and small screens

Stacks the sidebar above content on ≤768px, wraps the resource bar,
hides decorative labels/badges to reduce clutter, and collapses the
click area into a compact horizontal strip. Profile link button labels
hide on ≤480px leaving icon-only buttons. Tab bar already scrolled
horizontally so no further changes needed there.

apps/web/src/components/ui/ResourceBar.tsx

@@ -90,7 +90,7 @@ export const ResourceBar = ({
         target="_blank"
         title="Support the developer"
       >
-        💜 Donate
+        💜 <span className="btn-label">Donate</span>
       </a>
       <a
         className="profile-link-button"
@@ -99,7 +99,7 @@ export const ResourceBar = ({
         target="_blank"
         title="Join our Discord"
       >
-        💬 Discord
+        💬 <span className="btn-label">Discord</span>
       </a>
       {syncError !== null ? (
         <span className="save-status save-error" title={syncError}>
@@ -126,7 +126,7 @@ export const ResourceBar = ({
         target="_blank"
         title="View your public profile"
       >
-        👤 Profile
+        👤 <span className="btn-label">Profile</span>
       </a>
       <button
         className="profile-edit-button"