fix(admin-ui): improve mobile header controls

VargaJoe · VargaJoe · commit 865b75cccf14 · 2026-07-02T16:21:06.000+02:00
diff --git a/.env.example b/.env.example
@@ -14,6 +14,8 @@ SENSENET_DEV_PORT=3000
 # Development Settings (for hot reload)
 CHOKIDAR_USEPOLLING=true
 WATCHPACK_POLLING=true
+DISABLE_VIEW_OPTIONS_MENU=false
+WEBPACK_DEV_SERVER_CLIENT_WEB_SOCKET_URL=auto://0.0.0.0:0/ws
 
 # Database Settings (if using database service)
 # DB_PASSWORD=YourPassword123!
@@ -28,4 +30,4 @@ WATCHPACK_POLLING=true
 
 # Backend API URL (if connecting to external backend)
 # REACT_APP_SERVICE_URL=https://dev.demo.sensenet.com
-# REACT_APP_IDENTITY_SERVER_URL=https://is.demo.sensenet.com
+# REACT_APP_IDENTITY_SERVER_URL=https://is.demo.sensenet.com
diff --git a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx b/apps/sensenet/src/components/appbar/desktop-app-bar.tsx
@@ -25,9 +25,20 @@ const useStyles = makeStyles((theme) => {
       minHeight: '42px',
       paddingLeft: '6px',
       paddingRight: 0,
+      [theme.breakpoints.down('sm')]: {
+        paddingLeft: '2px',
+      },
     },
     logo: {
       marginRight: '21px',
+      [theme.breakpoints.down('sm')]: {
+        marginRight: '4px',
+      },
+    },
+    drawerButton: {
+      padding: '8px',
+      marginRight: '2px',
+      flex: '0 0 auto',
     },
     commandPaletteReplacement: {
       flex: 1,
@@ -46,9 +57,7 @@ const useStyles = makeStyles((theme) => {
         cursor: 'pointer',
       },
       [theme.breakpoints.down('sm')]: {
-        maxWidth: '28vw',
-        marginRight: '0.5rem',
-        fontSize: '13px',
+        display: 'none',
       },
     },
   })
@@ -122,6 +131,7 @@ export const DesktopAppBar: React.FunctionComponent<{ openDrawer?: () => void }>
           </Link>
           {personalSettings.drawer.enabled && (personalSettings.drawer.type === 'temporary' || device === 'mobile') ? (
             <IconButton
+              className={classes.drawerButton}
               onClick={() => {
                 props.openDrawer && props.openDrawer()
               }}>
diff --git a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx
@@ -22,11 +22,24 @@ const useStyles = makeStyles((theme: Theme) =>
       cursor: 'pointer',
       marginRight: '16px',
       padding: '7px',
+      [theme.breakpoints.down('sm')]: {
+        marginRight: '6px',
+      },
     },
     navMenu: {
       height: '100%',
       width: '140px',
       background: theme.palette.background.default,
+      flex: '0 0 auto',
+      [theme.breakpoints.down('sm')]: {
+        width: '112px',
+      },
+    },
+    navMenuCompact: {
+      width: '76px',
+      [theme.breakpoints.down('sm')]: {
+        width: '70px',
+      },
     },
     paper: {
       marginRight: theme.spacing(2),
@@ -77,6 +90,7 @@ const useStyles = makeStyles((theme: Theme) =>
 )
 
 export const DesktopNavMenu: FunctionComponent = () => {
+  const isViewOptionsMenuDisabled = process.env.DISABLE_VIEW_OPTIONS_MENU === 'true'
   const personalSettings = usePersonalSettings()
   const injector = useInjector()
   const classes = useStyles()
@@ -134,15 +148,17 @@ export const DesktopNavMenu: FunctionComponent = () => {
   }
 
   return (
-    <div className={clsx(globalClasses.centered, classes.navMenu)}>
+    <div className={clsx(globalClasses.centered, classes.navMenu, isViewOptionsMenuDisabled && classes.navMenuCompact)}>
       <>
-        <IconButton
-          aria-label={localization.topMenu.openViewOptions}
-          aria-controls={openViewOptions ? 'menu-list-grow' : undefined}
-          className={classes.viewOptions}
-          onClick={() => handleToggle(setOpenViewOptions)}>
-          <TuneOutlined />
-        </IconButton>
+        {!isViewOptionsMenuDisabled ? (
+          <IconButton
+            aria-label={localization.topMenu.openViewOptions}
+            aria-controls={openViewOptions ? 'menu-list-grow' : undefined}
+            className={classes.viewOptions}
+            onClick={() => handleToggle(setOpenViewOptions)}>
+            <TuneOutlined />
+          </IconButton>
+        ) : null}
         <UserAvatar
           user={user!}
           repositoryUrl={repo.configuration.repositoryUrl}
@@ -231,7 +247,7 @@ export const DesktopNavMenu: FunctionComponent = () => {
           </div>
         </Paper>
       ) : null}
-      {openViewOptions ? (
+      {!isViewOptionsMenuDisabled && openViewOptions ? (
         <Paper className={classes.popperViewWrapper}>
           <div className={classes.popper}>
             <ClickAwayListener onClickAway={() => handleClose(setOpenViewOptions)}>
diff --git a/apps/sensenet/src/components/command-palette/CommandPalette.tsx b/apps/sensenet/src/components/command-palette/CommandPalette.tsx
@@ -1,4 +1,4 @@
-import { createStyles, IconButton, makeStyles, Tooltip } from '@material-ui/core'
+import { createStyles, IconButton, makeStyles } from '@material-ui/core'
 import Clear from '@material-ui/icons/Clear'
 import Search from '@material-ui/icons/Search'
 import { debounce } from '@sensenet/client-utils'
@@ -10,7 +10,7 @@ import Autosuggest, { SuggestionSelectedEventData, SuggestionsFetchRequestedPara
 import { useHistory } from 'react-router-dom'
 import { ResponsiveContext, ResponsivePersonalSettings } from '../../context'
 import { globals } from '../../globalStyles'
-import { useLocalization, useSelectionService, useSnRoute, useTheme } from '../../hooks'
+import { useLocalization, useSelectionService, useSnRoute } from '../../hooks'
 import { CommandProviderManager } from '../../services'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { CommandPaletteHitsContainer } from './CommandPaletteHitsContainer'
@@ -26,7 +26,7 @@ export interface CommandPaletteItem {
   parameters?: string[]
 }
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles((theme) => {
   return createStyles({
     buttonWrapper: {
       display: 'flex',
@@ -37,6 +37,9 @@ const useStyles = makeStyles(() => {
       '& .MuiIconButton-root': {
         color: globals.common.headerText,
       },
+      [theme.breakpoints.down('sm')]: {
+        flex: '0 0 auto',
+      },
     },
     iconButton: {
       color: globals.common.headerText,
@@ -48,6 +51,23 @@ const useStyles = makeStyles(() => {
       width: '50%',
       marginRight: '9px',
     },
+    mobileComboBox: {
+      position: 'absolute',
+      top: globals.common.headerHeight,
+      left: 0,
+      right: 0,
+      zIndex: theme.zIndex.appBar + 1,
+      width: 'auto',
+      marginRight: 0,
+      padding: '6px 8px',
+      boxSizing: 'border-box',
+      backgroundColor: globals.common.headerBackground,
+      boxShadow: theme.shadows[2],
+    },
+    mobileOpenButton: {
+      padding: '8px',
+      marginRight: '2px',
+    },
     input: {
       color: 'white',
       backgroundColor: '#016ea5ff',
@@ -94,7 +114,6 @@ export const CommandPalette = () => {
   const [items, setItems] = useState<CommandPaletteItem[]>([])
   const [inputValue, setInputValue] = useState('')
   const localization = useLocalization().commandPalette
-  const theme = useTheme()
   const history = useHistory()
   const classes = useStyles()
   const device = useContext(ResponsiveContext)
@@ -237,6 +256,8 @@ export const CommandPalette = () => {
   }
 
   const actionMode = inputValue.startsWith('>')
+  const isMobile = device === 'mobile'
+  const showCollapsedMobileSearch = isMobile && !isOpened
   const actionContextHeader = actionMode ? (
     <div className={classes.actionContextHeader} data-test="command-palette-action-context">
       {activeContent ? (
@@ -255,72 +276,87 @@ export const CommandPalette = () => {
 
   return (
     <div className={classes.buttonWrapper}>
-      <div ref={containerRef} className={classes.comboBox} data-test="command-box">
-        <Autosuggest<CommandPaletteItem>
-          theme={{
-            suggestionsList: {
-              listStyle: 'none',
-              margin: 0,
-              padding: 0,
-            },
-            inputFocused: {
-              outlineWidth: 0,
-            },
-          }}
-          alwaysRenderSuggestions={isOpened}
-          suggestions={items}
-          highlightFirstSuggestion={true}
-          onSuggestionSelected={handleSelectSuggestion}
-          onSuggestionsFetchRequested={handleSuggestionsFetchRequested}
-          onSuggestionsClearRequested={() => setItems([])}
-          getSuggestionValue={(suggestion) => suggestion.primaryText}
-          renderSuggestion={(suggestion, params) => (
-            <CommandPaletteSuggestion
-              suggestion={suggestion}
-              params={params}
-              onOpenContextMenu={handleOpenSuggestionContextMenu}
-            />
+      {showCollapsedMobileSearch ? (
+        <IconButton
+          aria-label={localization.title}
+          title={localization.title}
+          className={classes.mobileOpenButton}
+          onClick={() => setIsOpened(true)}
+          data-test="command-palette-mobile-open">
+          <Search />
+        </IconButton>
+      ) : (
+        <div
+          ref={containerRef}
+          className={clsx(classes.comboBox, isMobile && classes.mobileComboBox)}
+          data-test="command-box">
+          <Autosuggest<CommandPaletteItem>
+            theme={{
+              suggestionsList: {
+                listStyle: 'none',
+                margin: 0,
+                padding: 0,
+              },
+              inputFocused: {
+                outlineWidth: 0,
+              },
+            }}
+            alwaysRenderSuggestions={isOpened}
+            suggestions={items}
+            highlightFirstSuggestion={true}
+            onSuggestionSelected={handleSelectSuggestion}
+            onSuggestionsFetchRequested={handleSuggestionsFetchRequested}
+            onSuggestionsClearRequested={() => setItems([])}
+            getSuggestionValue={(suggestion) => suggestion.primaryText}
+            renderSuggestion={(suggestion, params) => (
+              <CommandPaletteSuggestion
+                suggestion={suggestion}
+                params={params}
+                onOpenContextMenu={handleOpenSuggestionContextMenu}
+              />
+            )}
+            renderSuggestionsContainer={(params) => (
+              <CommandPaletteHitsContainer {...params} header={actionContextHeader} />
+            )}
+            inputProps={{
+              className: `${classes.input} ${inputValue ? classes.inputOpened : ''}`,
+              value: inputValue,
+              placeholder: localization.title,
+              onChange: (_ev, changeEvent) => {
+                setInputValue(changeEvent.newValue)
+              },
+              id: 'CommandBoxInput',
+              spellCheck: false,
+              onBlur: () => {
+                if (!isContextMenuInteractingRef.current) {
+                  setIsOpened(false)
+                }
+              },
+            }}
+          />
+          {!inputValue && (
+            <IconButton
+              title={localization.title}
+              style={{ position: 'absolute', right: '8px', zIndex: 2, top: '50%', transform: 'translateY(-50%)' }}
+              onMouseDown={(ev) => ev.preventDefault()}>
+              <Search />
+            </IconButton>
           )}
-          renderSuggestionsContainer={(params) => (
-            <CommandPaletteHitsContainer {...params} header={actionContextHeader} />
+          {inputValue && (
+            <IconButton
+              title={localization.clear}
+              style={{ position: 'absolute', right: '8px', zIndex: 2, top: '50%', transform: 'translateY(-50%)' }}
+              onClick={() => {
+                setInputValue('')
+                setItems([])
+                handleSuggestionsFetchRequested({ value: '', reason: 'input-changed' })
+              }}
+              onMouseDown={(ev) => ev.preventDefault()}>
+              <Clear />
+            </IconButton>
           )}
-          inputProps={{
-            className: `${classes.input} ${inputValue ? classes.inputOpened : ''}`,
-            value: inputValue,
-            placeholder: 'Search',
-            onChange: (_ev, changeEvent) => {
-              setInputValue(changeEvent.newValue)
-            },
-            id: 'CommandBoxInput',
-            spellCheck: false,
-            onBlur: () => {
-              if (!isContextMenuInteractingRef.current) {
-                setIsOpened(false)
-              }
-            },
-          }}
-        />
-        {!inputValue && (
-          <IconButton
-            title={'search'}
-            style={{ position: 'absolute', right: '0px', zIndex: 2, top: '50%', transform: 'translateY(-50%)' }}>
-            <Search />
-          </IconButton>
-        )}
-        {inputValue && (
-          <IconButton
-            title={localization.clear}
-            style={{ position: 'absolute', right: '0px', zIndex: 2, top: '50%', transform: 'translateY(-50%)' }}
-            onClick={() => {
-              setInputValue('')
-              setItems([])
-              handleSuggestionsFetchRequested({ value: '', reason: 'input-changed' })
-            }}
-            onMouseDown={(ev) => ev.preventDefault()}>
-            <Clear />
-          </IconButton>
-        )}
-      </div>
+        </div>
+      )}
       {contextMenuContent ? (
         <ContentContextMenu
           isOpened={isContextMenuOpened}
diff --git a/apps/sensenet/src/components/command-palette/CommandPaletteHitsContainer.tsx b/apps/sensenet/src/components/command-palette/CommandPaletteHitsContainer.tsx
@@ -16,9 +16,9 @@ export const CommandPaletteHitsContainer: FunctionComponent<
       square={true}
       style={{
         position: 'absolute',
-        zIndex: 1,
-        left: device === 'mobile' ? '64px' : undefined,
-        width: device === 'mobile' ? 'calc(100% - 80px)' : '100%',
+        zIndex: device === 'mobile' ? 1301 : 1,
+        left: device === 'mobile' ? 0 : undefined,
+        width: '100%',
       }}>
       <>
         {options.header}
diff --git a/apps/sensenet/webpack.common.js b/apps/sensenet/webpack.common.js
@@ -60,6 +60,7 @@ module.exports = {
     new webpack.EnvironmentPlugin({
       APP_VERSION: require('./package.json').version,
       AUTH_TYPE: process.env.AUTH_TYPE || 'SNAuth', // Default to SNAuth if not specified
+      DISABLE_VIEW_OPTIONS_MENU: process.env.DISABLE_VIEW_OPTIONS_MENU || 'false',
     }),
     new MonacoWebpackPlugin({
       languages: ['json', 'xml', 'html', 'javascript', 'markdown'],
diff --git a/apps/sensenet/webpack.dev.js b/apps/sensenet/webpack.dev.js
@@ -5,6 +5,7 @@ const common = require('./webpack.common.js')
 
 module.exports = (env) => {
   const disableDevReload = process.env.DISABLE_DEV_RELOAD === 'true'
+  const clientWebSocketURL = process.env.WEBPACK_DEV_SERVER_CLIENT_WEB_SOCKET_URL || 'auto://0.0.0.0:0/ws'
 
   return mergeWithCustomize({
     customizeArray: customizeArray({
@@ -20,6 +21,9 @@ module.exports = (env) => {
       liveReload: !disableDevReload,
       open: true,
       allowedHosts: process.env.ALLOWED_HOSTS || 'auto',
+      client: {
+        webSocketURL: clientWebSocketURL,
+      },
     },
     output: {
       filename: 'static/js/[name].js',
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
