Merge remote-tracking branch 'origin/css-rework-sidenav' into css-rework-sidenav

app/components/FriendCodeInput.tsx

@@ -62,7 +62,7 @@ export function FriendCodeInput({
 				</div>
 				{!friendCode ? (
 					<SubmitButton _action="ADD_FRIEND_CODE" state={fetcher.state}>
-						Save
+						{t("common:actions.save")}
 					</SubmitButton>
 				) : null}
 			</div>

app/components/MobileNav.module.css

@@ -188,6 +188,13 @@
 	}
 }
 
+.menuHeaderActions {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+	margin-inline-start: auto;
+}
+
 .panelCloseButton {
 	display: grid;
 	place-items: center;

app/components/MobileNav.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import {
 	Calendar,
 	ChevronRight,
+	Heart,
 	LogIn,
 	Menu,
 	MessageSquare,
@@ -26,9 +27,11 @@ import {
 	FRIENDS_PAGE,
 	navIconUrl,
 	SETTINGS_PAGE,
+	SUPPORT_PAGE,
 	userPage,
 } from "~/utils/urls";
 import { Avatar } from "./Avatar";
+import { LinkButton } from "./elements/Button";
 import { EventsList } from "./EventsList";
 import { Image } from "./Image";
 import { ChatSidebar } from "./layout/ChatSidebar";
@@ -342,13 +345,25 @@ function MenuOverlay({
 							<Menu size={18} />
 						</div>
 						<h2 className={styles.panelTitle}>{t("front:mobileNav.menu")}</h2>
-						<button
-							type="button"
-							className={styles.panelCloseButton}
-							onClick={onClose}
-						>
-							<X size={18} />
-						</button>
+						<div className={styles.menuHeaderActions}>
+							{!user?.roles.includes("MINOR_SUPPORT") ? (
+								<LinkButton
+									to={SUPPORT_PAGE}
+									size="small"
+									icon={<Heart />}
+									variant="outlined"
+								>
+									{t("common:pages.support")}
+								</LinkButton>
+							) : null}
+							<button
+								type="button"
+								className={styles.panelCloseButton}
+								onClick={onClose}
+							>
+								<X size={18} />
+							</button>
+						</div>
 					</header>
 
 					<nav aria-label={t("front:mobileNav.menu")}>

app/components/layout/TopRightButtons.module.css

@@ -4,6 +4,12 @@
 	margin-left: auto;
 }
 
+.supportWrapper {
+	@media screen and (max-width: 599px) {
+		display: none;
+	}
+}
+
 .searchAndAddContainer {
 	display: grid;
 	grid-template-columns: 2fr 1fr;

app/components/layout/TopRightButtons.tsx

@@ -27,14 +27,16 @@ export function TopRightButtons({
 	return (
 		<div className={styles.container}>
 			{showSupport ? (
-				<LinkButton
-					to={SUPPORT_PAGE}
-					size="small"
-					icon={<Heart />}
-					variant="outlined"
-				>
-					{t("common:pages.support")}
-				</LinkButton>
+				<div className={styles.supportWrapper}>
+					<LinkButton
+						to={SUPPORT_PAGE}
+						size="small"
+						icon={<Heart />}
+						variant="outlined"
+					>
+						{t("common:pages.support")}
+					</LinkButton>
+				</div>
 			) : null}
 			{isLoggedIn ? (
 				<>

app/components/layout/index.tsx

@@ -362,9 +362,7 @@ export function Layout({
 					<TopNavMenus />
 					<TopRightButtons
 						showSupport={Boolean(
-							data &&
-								!data?.user?.roles.includes("MINOR_SUPPORT") &&
-								isFrontPage,
+							data && !data?.user?.roles.includes("MINOR_SUPPORT"),
 						)}
 						showSearch={Boolean(data?.user)}
 						isLoggedIn={Boolean(data?.user)}

app/features/map-planner/plans-global.css

@@ -67,11 +67,17 @@ body:has(.planner) header {
 }
 
 .tlui-toolbar-container.tlui-toolbar__tools {
-	bottom: calc(var(--layout-fuse-bottom-height) + env(safe-area-inset-bottom));
+	bottom: calc(
+		var(--layout-fuse-bottom-height) +
+		env(safe-area-inset-bottom)
+	) !important;
 }
 
 .tl-watermark_SEE-LICENSE {
-	bottom: calc(var(--layout-fuse-bottom-height) + env(safe-area-inset-bottom));
+	bottom: calc(
+		var(--layout-fuse-bottom-height) +
+		env(safe-area-inset-bottom)
+	) !important;
 }
 
 img[src$="?outline=red"] {

app/styles/common.css

@@ -592,10 +592,14 @@
 
 .top-leaderboard {
 	min-height: 100px;
+	margin: 10px 0;
 }
 
 @media screen and (max-width: 599px) {
 	.publift-widget-sticky_footer-container {
-		bottom: calc(var(--layout-nav-height) + env(safe-area-inset-bottom));
+		bottom: calc(
+			var(--layout-nav-height) +
+			env(safe-area-inset-bottom)
+		) !important;
 	}
 }