diff --git a/app/client/src/components/admin/VideoCards.js b/app/client/src/components/admin/VideoCards.js index 3baffd7..afa5f62 100644 --- a/app/client/src/components/admin/VideoCards.js +++ b/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 ( @@ -217,6 +222,9 @@ const VideoCards = ({ dateLabel={isNewDate && (!hasManyclips || isFirstDateGroup) ? formattedDate : null} reserveDateSpace={showDateHeaders && (!hasManyclips || isFirstDateGroup)} /> + {needsBreakAfter && ( + + )} ) }) diff --git a/app/client/src/views/Dashboard.js b/app/client/src/views/Dashboard.js index 8ab0388..12c868a 100644 --- a/app/client/src/views/Dashboard.js +++ b/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 setAlert({ ...alert, open })}> {alert.message} + {toolbarTarget && ReactDOM.createPortal( + + - - {/* Edit mode buttons */}