From ca0efa15a539a6a0b1d27741c45c03b6576361f3 Mon Sep 17 00:00:00 2001 From: Joao Costa Date: Mon, 9 Feb 2026 00:11:05 -0300 Subject: [PATCH 1/5] fix(webui): improve mobile menu item link styling for better usability Signed-off-by: Joao Costa --- webui/src/default/menu-content.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webui/src/default/menu-content.tsx b/webui/src/default/menu-content.tsx index 8b17e538d..a14750bb4 100644 --- a/webui/src/default/menu-content.tsx +++ b/webui/src/default/menu-content.tsx @@ -35,7 +35,8 @@ import { LoginComponent } from './login'; export const MobileMenuItem = styled(MenuItem)({ cursor: 'auto', '&>a': { - textDecoration: 'none' + textDecoration: 'none', + width: '100%', } }); From 439c06e05eb7e10150ce64239c40f172feceb3ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jordi=20G=C3=B3mez?= Date: Wed, 11 Feb 2026 11:30:45 +0100 Subject: [PATCH 2/5] feat: using MUI component prop for menu --- webui/src/default/menu-content.tsx | 167 ++++++++++++----------------- webui/src/pages/user/logout.tsx | 10 +- 2 files changed, 76 insertions(+), 101 deletions(-) diff --git a/webui/src/default/menu-content.tsx b/webui/src/default/menu-content.tsx index a14750bb4..a5ec8b00f 100644 --- a/webui/src/default/menu-content.tsx +++ b/webui/src/default/menu-content.tsx @@ -8,10 +8,9 @@ * SPDX-License-Identifier: EPL-2.0 ********************************************************************************/ -import { FunctionComponent, PropsWithChildren, useContext } from 'react'; +import { FunctionComponent, PropsWithChildren, useContext, useRef } from 'react'; import { Typography, MenuItem, Link, Button, IconButton, Accordion, AccordionSummary, Avatar, AccordionDetails } from '@mui/material'; -import { useLocation } from 'react-router-dom'; -import { Link as RouteLink } from 'react-router-dom'; +import { useLocation, Link as RouteLink } from 'react-router-dom'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import GitHubIcon from '@mui/icons-material/GitHub'; import MenuBookIcon from '@mui/icons-material/MenuBook'; @@ -31,22 +30,13 @@ import { LogoutForm } from '../pages/user/logout'; import { LoginComponent } from './login'; //-------------------- Mobile View --------------------// - -export const MobileMenuItem = styled(MenuItem)({ - cursor: 'auto', - '&>a': { - textDecoration: 'none', - width: '100%', - } -}); - export const itemIcon = { mr: 1, width: '16px', height: '16px', }; -export const MobileMenuItemText: FunctionComponent = ({ children }) => { +export const MenuItemText: FunctionComponent = ({ children }) => { return ( {children} @@ -57,6 +47,7 @@ export const MobileMenuItemText: FunctionComponent = ({ child export const MobileUserAvatar: FunctionComponent = () => { const context = useContext(MainContext); const user = context.user; + const logoutFormRef = useRef(null); if (!user) { return null; } @@ -67,52 +58,46 @@ export const MobileUserAvatar: FunctionComponent = () => { aria-controls='user-actions' id='user-avatar' > - + {user.loginName} - + - - - - - {user.loginName} - - - - - - - - Settings - - - + + + + {user.loginName} + + + + + + Settings + + { user.role === 'admin' - ? - - - - Admin Dashboard - - - + ? + + + Admin Dashboard + + : null } - - - + logoutFormRef.current?.submit()}> + + Log Out - + - + ; }; @@ -126,63 +111,51 @@ export const MobileMenuContent: FunctionComponent = () => { user ? ( ) : ( - - { - return ( - - - Log In - - ); - }} - /> - + ( + + + + Log In + + + )} + /> ) )} {loginProviders && !location.pathname.startsWith(UserSettingsRoutes.ROOT) && ( - - - - - Publish Extension - - - + + + + Publish Extension + + )} - - - - - Source Code - - - - - - - - Documentation - - - - - - - - Slack Workspace - - - - - - - - About This Service - - - + + + + Source Code + + + + + + Documentation + + + + + + Slack Workspace + + + + + + About This Service + + ; }; diff --git a/webui/src/pages/user/logout.tsx b/webui/src/pages/user/logout.tsx index f4fa64bab..5229e40e8 100644 --- a/webui/src/pages/user/logout.tsx +++ b/webui/src/pages/user/logout.tsx @@ -8,7 +8,7 @@ * SPDX-License-Identifier: EPL-2.0 * ****************************************************************************** */ -import { FunctionComponent, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react'; +import { PropsWithChildren, useContext, useEffect, useRef, useState, forwardRef } from 'react'; import { Button } from '@mui/material'; import { styled } from '@mui/material/styles'; import { isError, CsrfTokenJson } from '../../extension-registry-types'; @@ -22,7 +22,7 @@ const LogoutButton = styled(Button)({ padding: 0 }); -export const LogoutForm: FunctionComponent = ({ children }) => { +export const LogoutForm = forwardRef(({ children }, ref) => { const [csrf, setCsrf] = useState(); const context = useContext(MainContext); @@ -44,10 +44,12 @@ export const LogoutForm: FunctionComponent = ({ children }) = } }; - return
+ return {csrf ? : null} {children}
; -}; \ No newline at end of file +}); + +LogoutForm.displayName = 'LogoutForm'; \ No newline at end of file From cf9bd4ce0af5733c01fcd7db298e4ed04ec4fb67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jordi=20G=C3=B3mez?= Date: Tue, 24 Feb 2026 10:41:10 +0100 Subject: [PATCH 3/5] feat: using MUI component prop for avatar menu --- webui/src/pages/user/avatar.tsx | 57 +++++++++++++-------------------- 1 file changed, 22 insertions(+), 35 deletions(-) diff --git a/webui/src/pages/user/avatar.tsx b/webui/src/pages/user/avatar.tsx index 99c3bf071..eb2f3df90 100644 --- a/webui/src/pages/user/avatar.tsx +++ b/webui/src/pages/user/avatar.tsx @@ -9,7 +9,6 @@ ********************************************************************************/ import { FunctionComponent, useContext, useRef, useState } from 'react'; -import { styled } from '@mui/material/styles'; import { Avatar, Menu, Typography, MenuItem, Link, Divider, IconButton } from '@mui/material'; import { Link as RouteLink } from 'react-router-dom'; import { UserSettingsRoutes } from './user-settings'; @@ -17,18 +16,12 @@ import { AdminDashboardRoutes } from '../admin-dashboard/admin-dashboard'; import { MainContext } from '../../context'; import { LogoutForm } from './logout'; -const AvatarRouteLink = styled(RouteLink)({ - cursor: 'pointer', - textDecoration: 'none' -}); - -const AvatarMenuItem = styled(MenuItem)({ cursor: 'auto' }); - export const UserAvatar: FunctionComponent = () => { const [open, setOpen] = useState(false); const context = useContext(MainContext); const avatarButton = useRef(); + const logoutFormRef = useRef(null); const handleAvatarClick = () => { setOpen(!open); @@ -60,43 +53,37 @@ export const UserAvatar: FunctionComponent = () => { anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} transformOrigin={{ vertical: 'top', horizontal: 'right' }} onClose={handleClose} > - - - - Logged in as - - - {user.loginName} - - - + + + Logged in as + + + {user.loginName} + + - - - - Settings - - - + + + Settings + + { user.role && user.role === 'admin' ? - - - - Admin Dashboard - - - + + + Admin Dashboard + + : '' } - - + logoutFormRef.current?.submit()}> + Log Out - + ; }; \ No newline at end of file From 798f9feac4782e23347898cec728a6de7b4b1b15 Mon Sep 17 00:00:00 2001 From: Thomas Neidhart Date: Tue, 24 Feb 2026 20:02:06 +0100 Subject: [PATCH 4/5] restore previous behavior: underline link on hover and set display to block --- webui/src/pages/user/avatar.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/webui/src/pages/user/avatar.tsx b/webui/src/pages/user/avatar.tsx index eb2f3df90..fd96fbce8 100644 --- a/webui/src/pages/user/avatar.tsx +++ b/webui/src/pages/user/avatar.tsx @@ -53,8 +53,16 @@ export const UserAvatar: FunctionComponent = () => { anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} transformOrigin={{ vertical: 'top', horizontal: 'right' }} onClose={handleClose} > - - + + Logged in as From a86e3f3fe5f57979682de9069e88fcac2258b369 Mon Sep 17 00:00:00 2001 From: Thomas Neidhart Date: Tue, 24 Feb 2026 21:26:31 +0100 Subject: [PATCH 5/5] add changelog entry, fix formatting --- webui/CHANGELOG.md | 1 + webui/src/pages/user/avatar.tsx | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/webui/CHANGELOG.md b/webui/CHANGELOG.md index d90958cd2..97b6ae571 100644 --- a/webui/CHANGELOG.md +++ b/webui/CHANGELOG.md @@ -11,6 +11,7 @@ This change log covers only the frontend library (webui) of Open VSX. ### Fixed - Check `Retry-After` http header when receiving `429` responses from the server ([#1637](https://github.com/eclipse/openvsx/pull/1637)) +- Menu items link clicks now capture the whole menu item area ([#1598](https://github.com/eclipse/openvsx/pull/1598)) ### Dependencies diff --git a/webui/src/pages/user/avatar.tsx b/webui/src/pages/user/avatar.tsx index fd96fbce8..eb39736b2 100644 --- a/webui/src/pages/user/avatar.tsx +++ b/webui/src/pages/user/avatar.tsx @@ -53,16 +53,16 @@ export const UserAvatar: FunctionComponent = () => { anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} transformOrigin={{ vertical: 'top', horizontal: 'right' }} onClose={handleClose} > - - + + Logged in as