u

src/routes/artikel/marken.jsx

@@ -34,54 +34,61 @@ class ArtikelMarkenSearchField extends PureComponent {
   clearInput() {
     this.setState({ input: '' });
   }
+
   render() {
     const { inputRef } = this.props;
 
     return (
-      <Box
-        ref={inputRef}
-        sx={{
-          mb: 2,
-          display: 'flex',
-          gap: 1.5,
-          alignItems: 'center',
-          minHeight: 40,
-        }}
-      >
-        <TextField
-          sx={{ maxWidth: 520, flexGrow: 1 }}
-          autoFocus
-          autoComplete="off"
-          value={this.state.input}
-          onChange={(e) => this.onInputChange(e.target.value)}
-          slotProps={{
-            htmlInput: {
-              autoCapitalize: 'off',
-              autoCorrect: 'off',
-            },
-            input: {
-              sx: { height: 40 },
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon color="action" />
-                </InputAdornment>
-              ),
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    size="small"
-                    onClick={() => this.clearInput()}
-                    onMouseDown={(e) => e.preventDefault()}
-                    aria-label="Suche löschen"
-                  >
-                    <ClearIcon fontSize="small" />
-                  </IconButton>
-                </InputAdornment>
-              ),
+      <PanelTileGrid sx={{ mb: 2 }}>
+        <Box
+          ref={inputRef}
+          sx={{
+            gridColumn: {
+              xs: '1 / -1',
+              sm: 'span 2',
+              md: 'span 2',
             },
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.5,
           }}
-        />
-      </Box>
+        >
+          <TextField
+            sx={{ width: '100%' }}
+            autoFocus
+            autoComplete="off"
+            value={this.state.input}
+            onChange={(e) => this.onInputChange(e.target.value)}
+            slotProps={{
+              htmlInput: {
+                autoCapitalize: 'off',
+                autoCorrect: 'off',
+              },
+              input: {
+                sx: { height: 40 },
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon color="action" />
+                  </InputAdornment>
+                ),
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      onClick={() => this.clearInput()}
+                      onMouseDown={(e) => e.preventDefault()}
+                      aria-label="Suche löschen"
+                    >
+                      <ClearIcon fontSize="small" />
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              },
+            }}
+          />
+          <ArtikelMarkeNew />
+        </Box>
+      </PanelTileGrid>
     );
   }
 }
@@ -95,7 +102,6 @@ class ArtikelMarkenPage extends PureComponent {
       brands: brandAutomat.state.brands,
     };
     this.searchRef = createRef();
-    this.createRowRef = createRef();
     this.handleRetry = this.handleRetry.bind(this);
   }
 
@@ -140,15 +146,12 @@ class ArtikelMarkenPage extends PureComponent {
           <PanelTile wide={2} minHeight={0} color={PURPLE_PANEL} sx={{ pb: 0 }}>
             <FillSpace
               aboveRef={[this.searchRef]}
-              belowRef={this.createRowRef}
               reserveBottom={32}
               minPageSize={8}
               minHeight={0}
               items={brands}
               renderItem={ArtikelMarke}
             />
-
-            <ArtikelMarkeNew rowRef={this.createRowRef} />
           </PanelTile>
         </PanelTileGrid>
       </>