u

src/components/AppShell.jsx

@@ -5,7 +5,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import UserMenu from './UserMenu';
-import { NAV_ITEMS } from '../nav';
+import { NAV_ITEMS, isNavItemActive } from '../nav';
 import { artikelQueryPath } from '../pages/artikel/artikelQuery';
 
 const SIDEBAR_WIDTH = 144;
@@ -28,7 +28,7 @@ export default function AppShell() {
       >
         <List disablePadding sx={{ flexGrow: 1 }}>
           {NAV_ITEMS.map(({ path, label, icon: Icon }) => {
-            const active = pathname === path || pathname.startsWith(`${path}/`);
+            const active = isNavItemActive(pathname, path);
 
             return (
               <ListItemButton

src/components/CompanySettingsDialog.jsx

@@ -17,6 +17,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { enqueueSnackbar } from 'notistack';
 import BackendError from './BackendError';
+import SingleLineTextEdit from './SingleLineTextEdit';
 import { selectAuthUser } from '../store/authSlice';
 import {
   loadCurrentCompany,
@@ -135,14 +136,13 @@ class CompanySettingsDialog extends Component {
               </Box>
             ) : (
               <Stack spacing={2}>
-                <TextField
+                <SingleLineTextEdit
-                  fullWidth
                   required
                   size="small"
                   label="Name"
                   value={name}
                   disabled={busy}
-                  onChange={(e) => this.setState({ name: e.target.value })}
+                  onChange={(nextName) => this.setState({ name: nextName })}
                   autoComplete="organization"
                   autoFocus
                 />

src/components/NameDialog.jsx

@@ -5,9 +5,9 @@ import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import TextField from '@mui/material/TextField';
 import Alert from '@mui/material/Alert';
 import BackendError from './BackendError';
+import SingleLineTextEdit from './SingleLineTextEdit';
 import { backendErrorFrom, isBackendFailure } from '../utils/backendError';
 
 /**
@@ -79,15 +79,13 @@ class NameDialog extends Component {
               )
             ) : null}
 
-            <TextField
+            <SingleLineTextEdit
-              fullWidth
               required
               autoFocus
               label="Name"
               value={name}
               disabled={busy}
-              onChange={(e) => this.setState({ name: e.target.value })}
+              onChange={(nextName) => this.setState({ name: nextName })}
-              autoComplete="off"
             />
           </DialogContent>
           <DialogActions sx={{ px: 3, pb: 2 }}>

src/components/PageLayout.jsx

@@ -1,6 +1,5 @@
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { artikelQueryPath } from '../pages/artikel/artikelQuery';
@@ -8,11 +7,10 @@ import { defaultCategoryPath, isKategorienPath } from '../pages/artikel/category
 
 const SUB_NAV_WIDTH = 80;
 
-function isSubNavActive(pathname, basePath, segment, knownSegments) {
+function isSubNavActive(pathname, basePath, segment) {
   if (!segment) {
-    if (pathname === basePath || pathname === `${basePath}/`) return true;
+    if (isKategorienPath(pathname)) return false;
-    const rest = pathname.slice(basePath.length).replace(/^\//, '');
+    return pathname === basePath || pathname === `${basePath}/`;
-    return Boolean(rest) && !rest.includes('/') && !knownSegments.has(rest);
   }
   if (segment === 'kategorien') {
     return isKategorienPath(pathname);
@@ -25,7 +23,6 @@ export default function PageLayout({ title, showTitle = true, subNav, basePath,
   const hasSubNav = subNav?.length > 0;
   const navigate = useNavigate();
   const { pathname } = useLocation();
-  const knownSegments = new Set((subNav ?? []).map((item) => item.segment).filter(Boolean));
 
   return (
     <Box sx={{ display: 'flex', gap: 2, minHeight: 0 }}>
@@ -43,42 +40,41 @@ export default function PageLayout({ title, showTitle = true, subNav, basePath,
       >
         {hasSubNav &&
           subNav.map(({ segment, label, icon: Icon }) => {
-            const active = isSubNavActive(pathname, basePath, segment, knownSegments);
+            const active = isSubNavActive(pathname, basePath, segment);
 
             return (
-              <Tooltip key={segment || 'index'} title={label} placement="right">
+              <IconButton
-                <IconButton
+                key={segment || 'index'}
-                  type="button"
+                type="button"
-                  aria-label={label}
+                aria-label={label}
-                  aria-current={active ? 'page' : undefined}
+                aria-current={active ? 'page' : undefined}
-                  disableRipple
+                disableRipple
-                  onMouseDown={(e) => e.preventDefault()}
+                onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => {
+                onClick={() => {
-                    if (!segment && basePath === '/artikel') {
+                  if (!segment && basePath === '/artikel') {
-                      navigate(artikelQueryPath());
+                    navigate(artikelQueryPath());
-                      return;
+                    return;
-                    }
+                  }
-                    if (segment === 'kategorien') {
+                  if (segment === 'kategorien') {
-                      navigate(defaultCategoryPath());
+                    navigate(defaultCategoryPath());
-                      return;
+                    return;
-                    }
+                  }
-                    navigate(segment ? `${basePath}/${segment}` : basePath);
+                  navigate(segment ? `${basePath}/${segment}` : basePath);
-                  }}
+                }}
-                  sx={(theme) => ({
+                sx={(theme) => ({
-                    width: 80,
+                  width: 80,
-                    height: 80,
+                  height: 80,
-                    borderRadius: '50%',
+                  borderRadius: '50%',
-                    color: active ? theme.palette.primary.main : theme.palette.text.secondary,
+                  color: active ? theme.palette.primary.main : theme.palette.text.secondary,
-                    bgcolor: 'transparent',
+                  bgcolor: 'transparent',
-                    '&:hover': {
+                  '&:hover': {
-                      bgcolor: theme.palette.action.hover,
+                    bgcolor: theme.palette.action.hover,
-                      color: theme.palette.primary.main,
+                    color: theme.palette.primary.main,
-                    },
+                  },
-                  })}
+                })}
-                >
+              >
-                  <Icon sx={{ fontSize: 40 }} />
+                <Icon sx={{ fontSize: 40 }} />
-                </IconButton>
+              </IconButton>
-              </Tooltip>
             );
           })}
       </Box>

src/components/SingleLineTextEdit.jsx

@@ -0,0 +1,62 @@
+import { Component } from 'react';
+import TextField from '@mui/material/TextField';
+
+/**
+ * Centralized single-line name field — same outlined look everywhere.
+ * Props: value, onChange(nextValue), plus optional TextField props.
+ */
+class SingleLineTextEdit extends Component {
+  render() {
+    const {
+      value,
+      onChange,
+      inputRef,
+      label = 'Name',
+      disabled = false,
+      readOnly = false,
+      autoFocus = false,
+      autoComplete = 'off',
+      size,
+      fullWidth = true,
+      required = false,
+      sx,
+      slotProps,
+      ...rest
+    } = this.props;
+
+    return (
+      <TextField
+        inputRef={inputRef}
+        fullWidth={fullWidth}
+        required={required}
+        size={size}
+        variant="outlined"
+        label={label}
+        value={value}
+        disabled={disabled}
+        onChange={(event) => {
+          if (!readOnly) onChange(event.target.value);
+        }}
+        autoFocus={autoFocus}
+        autoComplete={autoComplete}
+        slotProps={{
+          ...slotProps,
+          input: {
+            readOnly,
+            ...slotProps?.input,
+          },
+          htmlInput: {
+            spellCheck: false,
+            readOnly,
+            tabIndex: readOnly ? -1 : undefined,
+            ...slotProps?.htmlInput,
+          },
+        }}
+        sx={sx}
+        {...rest}
+      />
+    );
+  }
+}
+
+export default SingleLineTextEdit;

src/components/article/ArticleView.jsx

@@ -1,8 +1,8 @@
 import { Link as RouterLink } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
-import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
+import SingleLineTextEdit from '../SingleLineTextEdit';
 import { article } from '../../api';
 import { EditablePanelTile, PanelTile, PanelTileGrid } from '../panels';
 import { requireObject } from '../../utils/apiShape';
@@ -82,6 +82,35 @@ function nameDraftValid(draft) {
   return draft.name.trim().length > 0;
 }
 
+const articleNameTextSx = {
+  fontWeight: 700,
+  lineHeight: 1.2,
+};
+
+const articleNameFieldSx = {
+  '& .MuiInputBase-input': {
+    fontSize: '2.125rem',
+    ...articleNameTextSx,
+  },
+};
+
+const articleNameFieldHiddenSx = {
+  ...articleNameFieldSx,
+  pointerEvents: 'none',
+  '& .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'transparent',
+  },
+  '& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'transparent',
+  },
+  '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'transparent',
+  },
+  '& .MuiInputLabel-root': {
+    visibility: 'hidden',
+  },
+};
+
 export default function ArticleView({ article: articleData, onArticleUpdated }) {
   const basePrice = primaryPrice(articleData);
   const brutto = priceBrutto(basePrice);
@@ -107,42 +136,22 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
         isDirty={nameDraftDirty}
         canSave={nameDraftValid}
         renderDisplay={({ name }) => (
-          <Box
+          <SingleLineTextEdit
-            sx={{
+            label="Name"
-              display: 'flex',
+            value={name}
-              alignItems: 'center',
+            readOnly
-              minHeight: { xs: 0, sm: 200 },
+            onChange={() => {}}
-              pr: 5,
+            sx={articleNameFieldHiddenSx}
-            }}
+          />
-          >
-            <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.25 }}>
-              {name}
-            </Typography>
-          </Box>
         )}
         renderEdit={(draft, onChange, inputRef) => (
-          <Box
+          <SingleLineTextEdit
-            sx={{
+            inputRef={inputRef}
-              display: 'flex',
+            label="Name"
-              alignItems: 'center',
+            value={draft.name}
-              minHeight: { xs: 0, sm: 200 },
+            onChange={(name) => onChange({ name })}
-            }}
+            sx={articleNameFieldSx}
-          >
+          />
-            <TextField
-              inputRef={inputRef}
-              fullWidth
-              variant="standard"
-              value={draft.name}
-              onChange={(event) => onChange({ name: event.target.value })}
-              sx={{
-                '& .MuiInput-input': {
-                  fontSize: '1.25rem',
-                  fontWeight: 700,
-                  lineHeight: 1.25,
-                },
-              }}
-            />
-          </Box>
         )}
       />
 

src/components/panels/EditablePanelTile.jsx

@@ -17,6 +17,8 @@ function valuesEqual(a, b) {
   return JSON.stringify(a) === JSON.stringify(b);
 }
 
+const ACTION_PADDING = 12;
+
 /**
  * Panel tile with centralized inline-edit chrome.
  * Pass `onSave` to enable edit UI; omit it for read-only tiles (no edit icon).
@@ -120,14 +122,13 @@ class EditablePanelTileBase extends Component {
   };
 
   renderTitle() {
-    const { title } = this.props;
+    const { title, onSave } = this.props;
-    const { editing } = this.state;
     if (!title) return null;
     return (
       <Typography
         variant="overline"
         color="text.secondary"
-        sx={{ display: 'block', mb: 1, pr: editing ? 9 : 5 }}
+        sx={{ display: 'block', mb: 1, pr: onSave ? 9 : 0 }}
       >
         {title}
       </Typography>
@@ -148,32 +149,39 @@ class EditablePanelTileBase extends Component {
 
     if (!editing) {
       return (
-        <IconButton
+        <>
-          onClick={this.handleStartEdit}
+          <IconButton
-          aria-label="Bearbeiten"
+            disabled
-          sx={{ ...actionSx, right: 4 }}
+            aria-hidden
-        >
+            tabIndex={-1}
-          <EditOutlinedIcon sx={iconSx} />
+            sx={{
-        </IconButton>
+              ...actionSx,
+              right: 48,
+              visibility: 'hidden',
+              pointerEvents: 'none',
+            }}
+          >
+            <SaveOutlinedIcon sx={iconSx} />
+          </IconButton>
+          <IconButton
+            onClick={this.handleStartEdit}
+            aria-label="Bearbeiten"
+            sx={{ ...actionSx, right: 4 }}
+          >
+            <EditOutlinedIcon sx={iconSx} />
+          </IconButton>
+        </>
       );
     }
 
     return (
       <>
-        <IconButton
-          onClick={this.handleCancel}
-          disabled={saving}
-          aria-label="Abbrechen"
-          sx={{ ...actionSx, right: 48 }}
-        >
-          <CloseOutlinedIcon sx={iconSx} />
-        </IconButton>
         <IconButton
           onClick={this.handleSave}
           disabled={!this.canSave()}
           aria-label="Speichern"
           color={this.canSave() ? 'primary' : 'default'}
-          sx={{ ...actionSx, right: 4 }}
+          sx={{ ...actionSx, right: 48 }}
         >
           {saving ? (
             <CircularProgress size={22} color="inherit" />
@@ -181,23 +189,25 @@ class EditablePanelTileBase extends Component {
             <SaveOutlinedIcon sx={iconSx} />
           )}
         </IconButton>
+        <IconButton
+          onClick={this.handleCancel}
+          disabled={saving}
+          aria-label="Abbrechen"
+          sx={{ ...actionSx, right: 4 }}
+        >
+          <CloseOutlinedIcon sx={iconSx} />
+        </IconButton>
       </>
     );
   }
 
   render() {
-    const {
+    const { onSave, theme, wide = 1, sx, minHeight = 120, tileKey, renderDisplay, renderEdit } =
-      theme,
+      this.props;
-      wide = 1,
-      sx,
-      minHeight = 120,
-      tileKey,
-      renderDisplay,
-      renderEdit,
-    } = this.props;
     const { editing, draft, error } = this.state;
     const savedValue = this.getSavedValue();
     const pending = this.isDirty();
+    const actionPadding = onSave ? ACTION_PADDING : 0;
 
     return (
       <Paper
@@ -206,6 +216,7 @@ class EditablePanelTileBase extends Component {
           wide,
           sx,
           minHeight,
+          editing,
           pending,
           tileKey,
           theme,
@@ -214,7 +225,13 @@ class EditablePanelTileBase extends Component {
         {this.renderActions()}
         {this.renderTitle()}
         <Box
-          sx={{ flex: 1, minWidth: 0, pr: editing ? 1 : 0 }}
+          sx={{
+            flex: 1,
+            minWidth: 0,
+            pr: actionPadding,
+            display: 'flex',
+            alignItems: 'center',
+          }}
           onKeyDown={editing ? this.handleEditKeyDown : undefined}
         >
           {editing && draft != null

src/components/panels/panelTileLayout.js

@@ -1,6 +1,7 @@
 const GRID_COLUMNS = 4;
 
-export const PENDING_EDIT_BORDER = '#ec4899';
+export const PENDING_EDIT_BORDER = '#e11d48';
+export const EDITING_TILE_BORDER = '#94a3b8';
 
 function clampWide(wide) {
   return Math.min(Math.max(wide, 1), 3);
@@ -24,10 +25,16 @@ export function panelTileBackground(theme, tileKey) {
 
 export const PANEL_TILE_BORDER_RADIUS = 4;
 
+function tileRingBoxShadow(ringColor, elevationShadow) {
+  const inset = `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${ringColor}`;
+  return elevationShadow ? `${inset}, ${elevationShadow}` : inset;
+}
+
 export function panelTilePaperSx({
   wide,
   sx,
   minHeight = 120,
+  editing = false,
   pending = false,
   tileKey,
   theme,
@@ -35,6 +42,11 @@ export function panelTilePaperSx({
   const tileBg = panelTileBackground(theme, tileKey);
 
   const elevationShadow = theme?.shadows?.[4];
+  const ringColor = pending
+    ? PENDING_EDIT_BORDER
+    : editing
+      ? EDITING_TILE_BORDER
+      : null;
 
   return {
     gridColumn: responsiveColumnSpan(wide),
@@ -46,9 +58,9 @@ export function panelTilePaperSx({
     border: 'none',
     borderRadius: PANEL_TILE_BORDER_RADIUS,
     ...(tileBg ? { bgcolor: tileBg } : {}),
-    ...(pending && elevationShadow
+    ...(ringColor
       ? {
-          boxShadow: `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${PENDING_EDIT_BORDER}, ${elevationShadow}`,
+          boxShadow: tileRingBoxShadow(ringColor, elevationShadow),
         }
       : {}),
     ...sx,

src/nav.js

@@ -10,6 +10,7 @@ import ListAltIcon from '@mui/icons-material/ListAlt';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import GroupsIcon from '@mui/icons-material/Groups';
 import ContactPageIcon from '@mui/icons-material/ContactPage';
+import { isKategorienPath } from './pages/artikel/categoryRoute';
 
 export const NAV_ITEMS = [
   { path: '/artikel', label: 'Artikel', icon: Inventory2Icon },
@@ -19,6 +20,15 @@ export const NAV_ITEMS = [
   { path: '/infos', label: 'Infos', icon: InfoIcon },
 ];
 
+export function isNavItemActive(pathname, navPath) {
+  if (navPath === '/artikel') {
+    return pathname === navPath
+      || pathname.startsWith(`${navPath}/`)
+      || isKategorienPath(pathname);
+  }
+  return pathname === navPath || pathname.startsWith(`${navPath}/`);
+}
+
 export const SUB_NAV = {
   '/artikel': [
     { segment: '', icon: ViewListIcon },