More mobile resizing fixes

app/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fireshare",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",

app/client/src/components/cards/VideoCards.js

@@ -26,9 +26,7 @@ const VideoCards = ({
   const [videoModal, setVideoModal] = React.useState({
     open: false,
   })
-  const [isSingleColumn, setIsSingleColumn] = React.useState(false)
   const [visibleCount, setVisibleCount] = React.useState(PAGE_SIZE)
-  const containerRef = React.useRef()
   const sentinelRef = React.useRef()
 
   React.useEffect(() => {
@@ -75,26 +73,6 @@ const VideoCards = ({
     setVideos((vs) => vs.filter((v) => v.video_id !== id))
   }
 
-  React.useEffect(() => {
-    if (!vids || vids.length === 0) {
-      setIsSingleColumn(false)
-      return
-    }
-
-    const el = containerRef.current
-    if (!el) return
-
-    const observer = new ResizeObserver(([entry]) => {
-      const width = entry?.contentRect?.width || 0
-      if (!width) return
-      const single = width < size * 2 + 24
-      setIsSingleColumn(single)
-    })
-
-    observer.observe(el)
-    return () => observer.disconnect()
-  }, [size, vids])
-
   React.useEffect(() => {
     const sentinel = sentinelRef.current
     if (!sentinel) return
@@ -191,14 +169,10 @@ const VideoCards = ({
       {vids && vids.length !== 0 && (
         <>
           <Box
-            ref={containerRef}
             sx={{
               display: 'grid',
               width: '100%',
-              justifyContent: 'start',
-              gridTemplateColumns: isSingleColumn
-                ? '1fr'
-                : `repeat(auto-fill, minmax(min(100%, ${size}px), ${size}px))`,
+              gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${size}px), 1fr))`,
               gap: 2,
             }}
           >

app/client/src/views/ImageFeed.js

@@ -17,6 +17,8 @@ import EditIcon from '@mui/icons-material/Edit'
 import CheckIcon from '@mui/icons-material/Check'
 import DeleteIcon from '@mui/icons-material/Delete'
 import CasinoIcon from '@mui/icons-material/Casino'
+import DoneAllIcon from '@mui/icons-material/DoneAll'
+import RemoveDoneIcon from '@mui/icons-material/RemoveDone'
 import Select from 'react-select'
 import ImageCards from '../components/cards/ImageCards'
 import EditImageModal from '../components/modal/EditImageModal'
@@ -301,7 +303,7 @@ const ImageFeed = ({ authenticated, searchText, cardSize, selectedImageFolder, o
       </SnackbarAlert>
       {toolbarTarget &&
         ReactDOM.createPortal(
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'nowrap', minWidth: 0 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.5, sm: 1 }, flexWrap: 'nowrap', minWidth: 0 }}>
             {!(editMode && isMdDown) && (
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>
                 {showFolderDropdown && imageFolderList.length > 1 && (
@@ -353,9 +355,17 @@ const ImageFeed = ({ authenticated, searchText, cardSize, selectedImageFolder, o
             {authenticated && (
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'nowrap', minWidth: 0 }}>
                 {editMode && (
-                  <Box sx={{ display: 'flex', gap: 1, flexShrink: 1, minWidth: 0 }}>
-                    <OutlinedIconButton onClick={handleSelectAllToggle}>
-                      {allSelected ? 'Select None' : 'Select All'}
+                  <Box sx={{ display: 'flex', gap: { xs: 0.5, sm: 1 }, flexShrink: 1, minWidth: 0 }}>
+                    <OutlinedIconButton
+                      onClick={handleSelectAllToggle}
+                      icon={
+                        isMdDown ? (
+                          allSelected ? <RemoveDoneIcon sx={{ fontSize: 16 }} /> : <DoneAllIcon sx={{ fontSize: 16 }} />
+                        ) : undefined
+                      }
+                      title={allSelected ? 'Select None' : 'Select All'}
+                    >
+                      {!isMdDown ? (allSelected ? 'Select None' : 'Select All') : null}
                     </OutlinedIconButton>
                     <OutlinedIconButton
                       icon={<DeleteIcon sx={{ fontSize: 16 }} />}