u

src/routes/artikel/marken.jsx

@@ -34,22 +34,27 @@ class ArtikelMarkenSearchField extends PureComponent {
   clearInput() {
     this.setState({ input: '' });
   }
+
   render() {
     const { inputRef } = this.props;
 
     return (
+      <PanelTileGrid sx={{ mb: 2 }}>
         <Box
           ref={inputRef}
           sx={{
-          mb: 2,
+            gridColumn: {
+              xs: '1 / -1',
+              sm: 'span 2',
+              md: 'span 2',
+            },
             display: 'flex',
+            flexDirection: 'column',
             gap: 1.5,
-          alignItems: 'center',
-          minHeight: 40,
           }}
         >
           <TextField
-          sx={{ maxWidth: 520, flexGrow: 1 }}
+            sx={{ width: '100%' }}
             autoFocus
             autoComplete="off"
             value={this.state.input}
@@ -81,7 +86,9 @@ class ArtikelMarkenSearchField extends PureComponent {
               },
             }}
           />
+          <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>
       </>