Fixed an styling issue in the artists list view which caused an overflow

Author: semohr

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Another state-related bug around Searching for Candidates [#225](https://github.com/pSpitzner/beets-flask/issues/225). We now no longer require a certaint type of state before allowing to add candidates.
 - Asis candidates have been restyled to be more consistent with other candidate types. They now also include a cover art preview if available.
 - Fixed a typo in our opiniated beets config [#235](https://github.com/pSpitzner/beets-flask/issues/235)
+- Fixed an styling issue in the artists list view which caused an overflow
 
 ### Added
 

frontend/src/components/common/browser/artists.tsx

@@ -43,7 +43,15 @@ export function ArtistListRow({
                     },
                 })}
             >
-                <Typography variant="body1">
+                <Typography
+                    variant="body1"
+                    sx={{
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        flex: 1,
+                    }}
+                >
                     {artist.artist || 'Unknown Artist'}
                 </Typography>
                 <ArtistIcon

frontend/src/routes/library/browse/artists.index.tsx

@@ -104,33 +104,28 @@ function ArtistsListWrapper({
     return (
         <Box {...props}>
             <Box
-                sx={{
+                sx={(theme) => ({
+                    display: 'flex',
+                    gap: 4,
                     width: '100%',
-                    marginBottom: -1,
                     padding: 2,
-                    height: 'min-content',
-                    overflow: 'hidden',
-                }}
+                    [theme.breakpoints.down(500)]: {
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        gap: 2,
+                    },
+                })}
             >
-                <Box
+                <Search
+                    value={filter}
+                    setValue={setFilter}
+                    size="small"
                     sx={{
-                        display: 'flex',
-                        gap: 2,
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        flexWrap: 'wrap',
+                        flex: '1 1 auto',
+                        maxWidth: 300,
+                        flexGrow: 1,
                     }}
-                >
-                    <Search
-                        value={filter}
-                        setValue={setFilter}
-                        size="small"
-                        sx={{
-                            flex: '1 1 auto',
-                            maxWidth: 300,
-                        }}
-                    />
-                </Box>
+                />
                 <Typography
                     variant="caption"
                     color="text.secondary"