added flex breaks for large date groups, fixing odd alignments on hanging dates

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

@@ -180,11 +180,16 @@ const VideoCards = ({
             return vids.map((v, index) => {
               const currentDateKey = getDateKey(v)
               const prevDateKey = index > 0 ? getDateKey(vids[index - 1]) : null
+              const nextDateKey = index < vids.length - 1 ? getDateKey(vids[index + 1]) : null
               const isNewDate = showDateHeaders && currentDateKey !== prevDateKey
+              const isLastOfDate = currentDateKey !== nextDateKey
               const formattedDate = currentDateKey !== 'unknown' ? formatDate(currentDateKey) : 'Unknown Date'
-              const hasManyclips = dateCounts[currentDateKey] >= 5
+              const hasManyclips = dateCounts[currentDateKey] >= 6
               // When upload card is shown, first date group uses inline labels to flow with it
               const isFirstDateGroup = showUploadCard && currentDateKey === firstDateKey
+              // Insert flex break after a large date group ends to keep it isolated
+              // (applies even to first date group - it flows with upload card but still needs isolation from next date)
+              const needsBreakAfter = showDateHeaders && isLastOfDate && hasManyclips && nextDateKey !== null
 
               return (
                 <React.Fragment key={v.path + v.video_id}>
@@ -217,6 +222,9 @@ const VideoCards = ({
                     dateLabel={isNewDate && (!hasManyclips || isFirstDateGroup) ? formattedDate : null}
                     reserveDateSpace={showDateHeaders && (!hasManyclips || isFirstDateGroup)}
                   />
+                  {needsBreakAfter && (
+                    <Box sx={{ flexBasis: '100%', height: 0 }} />
+                  )}
                 </React.Fragment>
               )
             })

app/client/src/views/Dashboard.js

@@ -1,8 +1,8 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import {
   Box,
   Grid,
-  Stack,
   IconButton,
   Button,
   Dialog,
@@ -60,6 +60,7 @@ const Dashboard = ({ authenticated, searchText, cardSize, listStyle, showRelease
   const [showAddNewGame, setShowAddNewGame] = React.useState(false)
   const [featureAlertOpen, setFeatureAlertOpen] = React.useState(showReleaseNotes)
   const releaseNotes = releaseNotesProp
+  const [toolbarTarget, setToolbarTarget] = React.useState(null)
 
   if (searchText !== search) {
     setSearch(searchText)
@@ -107,6 +108,10 @@ const Dashboard = ({ authenticated, searchText, cardSize, listStyle, showRelease
     // eslint-disable-next-line
   }, [])
 
+  React.useEffect(() => {
+    setToolbarTarget(document.getElementById('navbar-toolbar-extra'))
+  }, [])
+
   const handleFeatureAlertClose = () => {
     if (releaseNotes?.version && authenticated) {
       ReleaseService.setLastSeenVersion(releaseNotes.version).catch(() => {})
@@ -295,31 +300,34 @@ const Dashboard = ({ authenticated, searchText, cardSize, listStyle, showRelease
       <SnackbarAlert severity={alert.type} open={alert.open} setOpen={(open) => setAlert({ ...alert, open })}>
         {alert.message}
       </SnackbarAlert>
+      {toolbarTarget && ReactDOM.createPortal(
+        <Box sx={{ minWidth: 200 }}>
+          <Select
+            value={dateSortOrder}
+            options={SORT_OPTIONS}
+            onChange={setDateSortOrder}
+            styles={selectSortTheme}
+            menuPortalTarget={document.body}
+            menuPosition="fixed"
+            blurInputOnSelect
+            isSearchable={false}
+          />
+        </Box>,
+        toolbarTarget,
+      )}
       <Box sx={{ height: '100%' }}>
         <Grid container item justifyContent="center">
           <Grid item xs={12}>
             <Grid container justifyContent="center">
               <Grid item xs={11} sm={9} md={7} lg={5} sx={{ mb: 2 }}>
-                <Stack direction="row" spacing={1}>
-                  <Box sx={{ flexGrow: 1 }}>
-                    <Select
-                      value={selectedFolder}
-                      options={createSelectFolders(folders)}
-                      onChange={handleFolderSelection}
-                      styles={selectFolderTheme}
-                      blurInputOnSelect
-                      isSearchable={false}
-                    />
-                  </Box>
-                  <Select
-                    value={dateSortOrder}
-                    options={SORT_OPTIONS}
-                    onChange={setDateSortOrder}
-                    styles={selectSortTheme}
-                    blurInputOnSelect
-                    isSearchable={false}
-                  />
-                </Stack>
+                <Select
+                  value={selectedFolder}
+                  options={createSelectFolders(folders)}
+                  onChange={handleFolderSelection}
+                  styles={selectFolderTheme}
+                  blurInputOnSelect
+                  isSearchable={false}
+                />
               </Grid>
             </Grid>
             {/* Edit mode buttons */}