u

index.html

@@ -1,8 +1,9 @@
 <!doctype html>
-<html lang="en">
+<html lang="de" class="notranslate" translate="no">
 
 <head>
   <meta charset="UTF-8" />
+  <meta name="google" content="notranslate" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>QuixPOS * Management Interface</title>
 

src/routes/artikel.jsx

@@ -202,8 +202,11 @@ class ResultRow extends Component {
                 height: '20px',
               }}
             >
-              {(row.brand?.name || row.brandName) && (
-                <>
+              {(row.brand?.name || row.brandName) ? (
+                <Box
+                  component="span"
+                  sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}
+                >
                   <BrandLabel
                     brand={row.brand || { name: row.brandName, thumbHash: row.brandThumbHash }}
                     name={row.brand?.name || row.brandName}
@@ -215,13 +218,18 @@ class ResultRow extends Component {
                       noWrap: true,
                     }}
                   />
-                  {' · '}
-                </>
-              )}
-              {row.sku}
-              {' · '}
+                  <span>·</span>
+                </Box>
+              ) : null}
+              <Box component="span" sx={{ flexShrink: 0 }}>
+                {row.sku}
+              </Box>
+              <Box component="span" sx={{ flexShrink: 0 }}>
+                ·
+              </Box>
               <Box
                 component="span"
+                sx={{ flexShrink: 0 }}
                 title={
                   row.warehouses?.length > 0
                     ? row.warehouses.map((w) => `${w.name || 'Lager'}: ${formatStock(w.stock)}`).join(' · ')
@@ -230,11 +238,20 @@ class ResultRow extends Component {
               >
                 Bestand {formatStock(row.stock)}
               </Box>
-              {' · '}
-              Verfügbar {formatStock(row.available)}
-              {row.categories
-                ? ` · ${formatCategoryList(row.categories, categoryFacets ?? {})}`
-                : ''}
+              <Box component="span" sx={{ flexShrink: 0 }}>
+                ·
+              </Box>
+              <Box component="span" sx={{ flexShrink: 0 }}>
+                Verfügbar {formatStock(row.available)}
+              </Box>
+              {row.categories ? (
+                <Box
+                  component="span"
+                  sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                >
+                  {` · ${formatCategoryList(row.categories, categoryFacets ?? {})}`}
+                </Box>
+              ) : null}
             </Typography>
           }
           slotProps={{ primary: { fontWeight: 500, noWrap: true } }}
@@ -1028,7 +1045,7 @@ class ArtikelSearchPage extends Component {
             <PanelTile minHeight={0} sx={{ pb: 0 }}>
               <FillSpace
                 ref={this.fillSpaceRef}
-                aboveRef={[this.filterHeaderRef]}
+                aboveRef={this.filterHeaderRef}
                 items={rows}
                 renderItem={ResultRow}
                 reserveBottom={32}