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(
+
+
+ ,
+ toolbarTarget,
+ )}
-
-
-
-
-
-
+
{/* Edit mode buttons */}