Merge pull request #4928 from 7heMech/develop

UI/UX improvements

frontend/src/components/LocalePicker.tsx

@@ -5,7 +5,11 @@ import { useTheme } from "src/hooks";
 import { changeLocale, getFlagCodeForLocale, localeOptions, T } from "src/locale";
 import styles from "./LocalePicker.module.css";
 
-function LocalePicker() {
+interface Props {
+	menuAlign?: "start" | "end";
+}
+
+function LocalePicker({ menuAlign = "start" }: Props) {
 	const { locale, setLocale } = useLocaleState();
 	const { getTheme } = useTheme();
 
@@ -23,7 +27,10 @@ function LocalePicker() {
 			<button type="button" className={cns} data-bs-toggle="dropdown">
 				<Flag countryCode={getFlagCodeForLocale(locale)} />
 			</button>
-			<div className="dropdown-menu">
+			<div className={cn("dropdown-menu", {
+				"dropdown-menu-end": menuAlign === "end",
+			})}
+			>
 				{localeOptions.map((item) => {
 					return (
 						<a

frontend/src/components/SiteContainer.tsx

@@ -2,5 +2,5 @@ interface Props {
 	children: React.ReactNode;
 }
 export function SiteContainer({ children }: Props) {
-	return <div className="container-xl py-3">{children}</div>;
+	return <div className="container-xl py-3 min-w-0 overflow-x-auto">{children}</div>;
 }

frontend/src/components/SiteHeader.tsx

@@ -25,7 +25,7 @@ export function SiteHeader() {
 				>
 					<span className="navbar-toggler-icon" />
 				</button>
-				<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+				<div className="navbar-brand navbar-brand-autodark pe-0 pe-md-3">
 					<NavLink to="/">
 						<div className={styles.logo}>
 							<img
@@ -48,11 +48,11 @@ export function SiteHeader() {
 							<ThemeSwitcher />
 						</div>
 					</div>
-					<div className="nav-item d-none d-md-flex me-3">
+					<div className="nav-item d-md-flex">
 						<div className="nav-item dropdown">
 							<a
 								href="/"
-								className="nav-link d-flex lh-1 p-0 px-2"
+								className="nav-link d-flex lh-1"
 								data-bs-toggle="dropdown"
 								aria-label="Open user menu"
 							>
@@ -70,6 +70,22 @@ export function SiteHeader() {
 								</div>
 							</a>
 							<div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+								<div className="d-md-none">
+									{/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: This div is not interactive. */}
+									<div className="p-2 pb-1 pe-1 d-flex align-items-center" onClick={e => e.stopPropagation()}>
+										<div className="ps-2 pe-1 me-auto">
+											<div>{currentUser?.nickname}</div>
+											<div className="mt-1 small text-secondary text-nowrap">
+												<T id={isAdmin ? "role.admin" : "role.standard-user"} />
+											</div>
+										</div>
+										<div className="d-flex align-items-center">
+											<ThemeSwitcher className="me-n2" />
+											<LocalePicker menuAlign="end" />
+										</div>
+									</div>
+									<div className="dropdown-divider" />
+								</div>
 								<a
 									href="?"
 									className="dropdown-item"

frontend/src/components/SiteMenu.tsx

@@ -176,17 +176,13 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
 };
 
 export function SiteMenu() {
-	// This is hacky AF. But that's the price of using a non-react UI kit.
-	const closeMenus = () => {
-		const navMenus = document.querySelectorAll(".nav-item.dropdown");
-		navMenus.forEach((menu) => {
-			menu.classList.remove("show");
-			const dropdown = menu.querySelector(".dropdown-menu");
-			if (dropdown) {
-				dropdown.classList.remove("show");
-			}
-		});
-	};
+	const closeMenu = () => setTimeout(() => {
+		const navbarToggler = document.querySelector<HTMLElement>(".navbar-toggler");
+		const navbarMenu = document.querySelector("#navbar-menu");
+		if (navbarToggler && navbarMenu?.classList.contains("show")) {
+			navbarToggler.click();
+		}
+	}, 300);
 
 	return (
 		<header className="navbar-expand-md">
@@ -198,7 +194,7 @@ export function SiteMenu() {
 								<ul className="navbar-nav">
 									{menuItems.length > 0 &&
 										menuItems.map((item) => {
-											return getMenuItem(item, closeMenus);
+											return getMenuItem(item, closeMenu);
 										})}
 								</ul>
 							</div>

frontend/src/components/Table/TableLayout.tsx

@@ -12,10 +12,12 @@ interface TableLayoutProps<TFields> {
 function TableLayout<TFields>(props: TableLayoutProps<TFields>) {
 	const hasRows = props.tableInstance.getRowModel().rows.length > 0;
 	return (
-		<table className="table table-vcenter table-selectable mb-0">
-			{hasRows ? <TableHeader tableInstance={props.tableInstance} /> : null}
-			<TableBody {...props} />
-		</table>
+		<div className="table-responsive">
+			<table className="table table-vcenter table-selectable mb-0">
+				{hasRows ? <TableHeader tableInstance={props.tableInstance} /> : null}
+				<TableBody {...props} />
+			</table>
+		</div>
 	);
 }