From 219e4b3b0e8336442d7e401cfd4c1605d4e9fb9a Mon Sep 17 00:00:00 2001
From: Shane Israel <shanemisrael@gmail.com>
Date: Fri, 10 Apr 2026 21:46:42 -0600
Subject: [PATCH 1/2] update card paddings

---
 app/client/src/components/cards/ImageCards.js | 230 +++++++++---------
 app/client/src/components/cards/VideoCards.js |  10 +-
 .../src/components/game/GameVideosHeader.js   |   2 +-
 app/client/src/views/Dashboard.js             |   7 +-
 app/client/src/views/Feed.js                  | 166 -------------
 app/client/src/views/GameVideos.js            |  19 +-
 app/client/src/views/Games.js                 |   9 +-
 app/client/src/views/ImageFeed.js             |  15 +-
 8 files changed, 163 insertions(+), 295 deletions(-)
 delete mode 100644 app/client/src/views/Feed.js

diff --git a/app/client/src/components/cards/ImageCards.js b/app/client/src/components/cards/ImageCards.js
index 445c34a2..0df3b787 100644
--- a/app/client/src/components/cards/ImageCards.js
+++ b/app/client/src/components/cards/ImageCards.js
@@ -107,126 +107,128 @@ const LazyImageCard = ({
   )
 }
 
-const ImageCards = React.memo(({
-  images,
-  loadingIcon = null,
-  feedView = false,
-  authenticated,
-  size,
-  onImageOpen,
-  editMode = false,
-  selectedImages,
-  onImageSelect,
-}) => {
-  const [imgs, setImages] = React.useState(images || [])
-  const [alert, setAlert] = React.useState({ open: false })
-  const [columnCount, setColumnCount] = React.useState(3)
-  const containerRef = React.useRef()
-
-  React.useEffect(() => {
-    setImages(images || [])
-  }, [images])
-
-  React.useEffect(() => {
-    if (!imgs || imgs.length === 0) {
-      setColumnCount(3)
-      return
-    }
-
-    const el = containerRef.current
-    if (!el) return
-
-    const observer = new ResizeObserver(([entry]) => {
-      const width = entry?.contentRect?.width || 0
-      if (!width) return
-      const colWidth = size || 300
-      const cols = Math.max(1, Math.floor((width + 16) / (colWidth + 16)))
-      setColumnCount(cols)
-    })
-
-    observer.observe(el)
-    return () => observer.disconnect()
-  }, [size, imgs])
+const ImageCards = React.memo(
+  ({
+    images,
+    loadingIcon = null,
+    feedView = false,
+    authenticated,
+    size,
+    onImageOpen,
+    editMode = false,
+    selectedImages,
+    onImageSelect,
+  }) => {
+    const [imgs, setImages] = React.useState(images || [])
+    const [alert, setAlert] = React.useState({ open: false })
+    const [columnCount, setColumnCount] = React.useState(3)
+    const containerRef = React.useRef()
+
+    React.useEffect(() => {
+      setImages(images || [])
+    }, [images])
+
+    React.useEffect(() => {
+      if (!imgs || imgs.length === 0) {
+        setColumnCount(3)
+        return
+      }
+
+      const el = containerRef.current
+      if (!el) return
+
+      const observer = new ResizeObserver(([entry]) => {
+        const width = entry?.contentRect?.width || 0
+        if (!width) return
+        const colWidth = size || 300
+        const cols = Math.max(1, Math.floor((width + 16) / (colWidth + 16)))
+        setColumnCount(cols)
+      })
 
-  const memoizedHandleAlert = useCallback((a) => setAlert(a), [])
+      observer.observe(el)
+      return () => observer.disconnect()
+    }, [size, imgs])
 
-  const handleDelete = (id) => {
-    setImages((prev) => prev.filter((img) => img.image_id !== id))
-  }
+    const memoizedHandleAlert = useCallback((a) => setAlert(a), [])
 
-  const openImage = (img) => {
-    if (onImageOpen) onImageOpen(img)
-  }
+    const handleDelete = (id) => {
+      setImages((prev) => prev.filter((img) => img.image_id !== id))
+    }
 
-  const EMPTY_STATE = () => (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 2,
-        py: 8,
-        px: 3,
-        border: '1px solid #FFFFFF14',
-        borderRadius: '16px',
-        background: '#00000040',
-      }}
-    >
-      {!loadingIcon && (
-        <>
-          <ImageIcon sx={{ fontSize: 56, color: '#FFFFFF33' }} />
-          <Box sx={{ textAlign: 'center' }}>
-            <Typography sx={{ fontWeight: 700, fontSize: 20, color: 'white', mb: 0.5 }}>No images found</Typography>
-            {!feedView && (
-              <Typography sx={{ fontSize: 14, color: '#FFFFFF66' }}>
-                Upload images or scan your image library
-              </Typography>
-            )}
-          </Box>
-        </>
-      )}
-      {loadingIcon}
-    </Box>
-  )
+    const openImage = (img) => {
+      if (onImageOpen) onImageOpen(img)
+    }
 
-  return (
-    <Box>
-      <SnackbarAlert
-        severity={alert.type}
-        open={alert.open}
-        onClose={alert.onClose}
-        setOpen={(open) => setAlert({ ...alert, open })}
+    const EMPTY_STATE = () => (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 2,
+          py: 8,
+          px: 3,
+          border: '1px solid #FFFFFF14',
+          borderRadius: '16px',
+          background: '#00000040',
+        }}
       >
-        {alert.message}
-      </SnackbarAlert>
-
-      {imgs.length === 0 && EMPTY_STATE()}
-      {imgs.length > 0 && (
-        <Box
-          ref={containerRef}
-          sx={{
-            columnCount: columnCount,
-            columnGap: '8px',
-          }}
+        {!loadingIcon && (
+          <>
+            <ImageIcon sx={{ fontSize: 56, color: '#FFFFFF33' }} />
+            <Box sx={{ textAlign: 'center' }}>
+              <Typography sx={{ fontWeight: 700, fontSize: 20, color: 'white', mb: 0.5 }}>No images found</Typography>
+              {!feedView && (
+                <Typography sx={{ fontSize: 14, color: '#FFFFFF66' }}>
+                  Upload images or scan your image library
+                </Typography>
+              )}
+            </Box>
+          </>
+        )}
+        {loadingIcon}
+      </Box>
+    )
+
+    return (
+      <Box>
+        <SnackbarAlert
+          severity={alert.type}
+          open={alert.open}
+          onClose={alert.onClose}
+          setOpen={(open) => setAlert({ ...alert, open })}
         >
-          {imgs.map((img) => (
-            <LazyImageCard
-              key={img.image_id}
-              img={img}
-              openImageHandler={() => (editMode ? onImageSelect?.(img.image_id) : openImage(img))}
-              alertHandler={memoizedHandleAlert}
-              authenticated={authenticated}
-              onRemoveFromView={handleDelete}
-              editMode={editMode}
-              selected={selectedImages?.has(img.image_id)}
-              onSelect={onImageSelect}
-            />
-          ))}
-        </Box>
-      )}
-    </Box>
-  )
-})
+          {alert.message}
+        </SnackbarAlert>
+
+        {imgs.length === 0 && EMPTY_STATE()}
+        {imgs.length > 0 && (
+          <Box
+            ref={containerRef}
+            sx={{
+              columnCount: columnCount,
+              columnGap: '8px',
+            }}
+          >
+            {imgs.map((img) => (
+              <LazyImageCard
+                key={img.image_id}
+                img={img}
+                openImageHandler={() => (editMode ? onImageSelect?.(img.image_id) : openImage(img))}
+                alertHandler={memoizedHandleAlert}
+                authenticated={authenticated}
+                onRemoveFromView={handleDelete}
+                editMode={editMode}
+                selected={selectedImages?.has(img.image_id)}
+                onSelect={onImageSelect}
+              />
+            ))}
+          </Box>
+        )}
+      </Box>
+    )
+  },
+)
 
 export default ImageCards
diff --git a/app/client/src/components/cards/VideoCards.js b/app/client/src/components/cards/VideoCards.js
index b9a9a730..28663137 100644
--- a/app/client/src/components/cards/VideoCards.js
+++ b/app/client/src/components/cards/VideoCards.js
@@ -131,13 +131,9 @@ const VideoCards = ({
         <>
           <OndemandVideoIcon sx={{ fontSize: 56, color: '#FFFFFF33' }} />
           <Box sx={{ textAlign: 'center' }}>
-            <Typography sx={{ fontWeight: 700, fontSize: 20, color: 'white', mb: 0.5 }}>
-              No videos found
-            </Typography>
+            <Typography sx={{ fontWeight: 700, fontSize: 20, color: 'white', mb: 0.5 }}>No videos found</Typography>
             {!feedView && (
-              <Typography sx={{ fontSize: 14, color: '#FFFFFF66' }}>
-                Scan your library to discover videos
-              </Typography>
+              <Typography sx={{ fontSize: 14, color: '#FFFFFF66' }}>Scan your library to discover videos</Typography>
             )}
           </Box>
           {!feedView && (
@@ -200,7 +196,7 @@ const VideoCards = ({
               width: isSingleColumn ? 'calc(100% + 48px)' : '100%',
               mx: isSingleColumn ? '-24px' : 0,
               gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${size}px), 1fr))`,
-              gap: '24px',
+              gap: 2,
             }}
           >
             {vids.slice(0, visibleCount).map((v, index) => (
diff --git a/app/client/src/components/game/GameVideosHeader.js b/app/client/src/components/game/GameVideosHeader.js
index fe6ff4c2..cbc5ba79 100644
--- a/app/client/src/components/game/GameVideosHeader.js
+++ b/app/client/src/components/game/GameVideosHeader.js
@@ -17,7 +17,7 @@ const GameVideosHeader = ({ game, height = 200, editMode, onEditAssets }) => {
         width: '100%',
         height,
         overflow: 'hidden',
-        mb: 3,
+        mb: 2,
       }}
     >
       {bgUrl && (
diff --git a/app/client/src/views/Dashboard.js b/app/client/src/views/Dashboard.js
index bcc6dc69..6f9a01d4 100644
--- a/app/client/src/views/Dashboard.js
+++ b/app/client/src/views/Dashboard.js
@@ -475,7 +475,12 @@ const Dashboard = ({
                       height: 38,
                       flexShrink: 1,
                       minWidth: 0,
-                      '& .MuiButton-root': { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', px: { xs: 1, sm: 2 } },
+                      '& .MuiButton-root': {
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        px: { xs: 1, sm: 2 },
+                      },
                     }}
                   >
                     <Button color="primary" onClick={handleSelectAllToggle}>
diff --git a/app/client/src/views/Feed.js b/app/client/src/views/Feed.js
deleted file mode 100644
index 0b646f60..00000000
--- a/app/client/src/views/Feed.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { Box, Grid } from '@mui/material'
-import VideoCards from '../components/cards/VideoCards'
-import { VideoService } from '../services'
-import LoadingSpinner from '../components/misc/LoadingSpinner'
-
-import Select from 'react-select'
-import SnackbarAlert from '../components/alert/SnackbarAlert'
-
-import selectSortTheme from '../common/reactSelectSortTheme'
-import { SORT_OPTIONS } from '../common/constants'
-
-const Feed = ({ authenticated, searchText, cardSize, selectedFolder, onFoldersLoaded }) => {
-  const [videos, setVideos] = React.useState([])
-  const [search, setSearch] = React.useState(searchText)
-  const [filteredVideos, setFilteredVideos] = React.useState([])
-  const [loading, setLoading] = React.useState(true)
-  const [sortOrder, setSortOrder] = React.useState(SORT_OPTIONS?.[0] || { value: 'newest', label: 'Newest' })
-
-  const [alert, setAlert] = React.useState({ open: false })
-
-  const [prevCardSize, setPrevCardSize] = React.useState(cardSize)
-  const [toolbarTarget, setToolbarTarget] = React.useState(null)
-
-  React.useEffect(() => {
-    setToolbarTarget(document.getElementById('navbar-toolbar-extra'))
-  }, [])
-
-  if (searchText !== search) {
-    setSearch(searchText)
-    const tagMatches = searchText.match(/#(\w+)/g) || []
-    const tagNames = tagMatches.map((t) => t.slice(1).toLowerCase())
-    const textQuery = searchText.replace(/#\w+/g, '').trim()
-    setFilteredVideos(
-      videos.filter((v) => {
-        const titleMatch =
-          !textQuery ||
-          v.info.title.search(new RegExp(textQuery, 'i')) >= 0 ||
-          (v.game?.name && v.game.name.search(new RegExp(textQuery, 'i')) >= 0)
-        const tagMatch = tagNames.every(
-          (tagName) =>
-            v.tags &&
-            v.tags.some(
-              (t) =>
-                t.name.toLowerCase() === tagName ||
-                t.name.replace(/_/g, ' ').toLowerCase() === tagName,
-            ),
-        )
-        return titleMatch && tagMatch
-      }),
-    )
-  }
-  if (cardSize !== prevCardSize) {
-    setPrevCardSize(cardSize)
-  }
-
-  function fetchVideos() {
-    VideoService.getPublicVideos()
-      .then((res) => {
-        setVideos(res.data.videos)
-        setFilteredVideos(res.data.videos)
-        const tfolders = []
-        res.data.videos.forEach((v) => {
-          const split = v.path
-            .split('/')
-            .slice(0, -1)
-            .filter((f) => f !== '')
-          if (split.length > 0 && !tfolders.includes(split[0])) {
-            tfolders.push(split[0])
-          }
-        })
-        tfolders.sort((a, b) => (a.toLowerCase() > b.toLowerCase() ? 1 : -1)).unshift('All Videos')
-        if (onFoldersLoaded) onFoldersLoaded(tfolders)
-        setLoading(false)
-      })
-      .catch((err) => {
-        setLoading(false)
-        setAlert({
-          open: true,
-          type: 'error',
-          message: typeof err.response?.data === 'string' ? err.response.data : 'Unknown Error',
-        })
-        console.log(err)
-      })
-  }
-
-  React.useEffect(() => {
-    fetchVideos()
-    // eslint-disable-next-line
-  }, [])
-
-  // Use folder from Navbar props (falls back to All Videos)
-  const folder = selectedFolder || { value: 'All Videos', label: 'All Videos' }
-
-  // Get the filtered videos based on folder selection
-  const displayVideos = React.useMemo(() => {
-    if (folder.value === 'All Videos') {
-      return filteredVideos
-    }
-    return filteredVideos?.filter(
-      (v) =>
-        v.path
-          .split('/')
-          .slice(0, -1)
-          .filter((f) => f !== '')[0] === folder.value,
-    )
-  }, [filteredVideos, folder])
-
-  // Sort videos by recorded date or views
-  const sortedVideos = React.useMemo(() => {
-    if (!displayVideos) return []
-
-    return [...displayVideos].sort((a, b) => {
-      if (sortOrder.value === 'most_views') {
-        return (b.view_count || 0) - (a.view_count || 0)
-      } else if (sortOrder.value === 'least_views') {
-        return (a.view_count || 0) - (b.view_count || 0)
-      } else {
-        const dateA = a.recorded_at ? new Date(a.recorded_at) : new Date(0)
-        const dateB = b.recorded_at ? new Date(b.recorded_at) : new Date(0)
-        return sortOrder.value === 'newest' ? dateB - dateA : dateA - dateB
-      }
-    })
-  }, [displayVideos, sortOrder])
-
-  return (
-    <>
-      <SnackbarAlert severity={alert.type} open={alert.open} setOpen={(open) => setAlert({ ...alert, open })}>
-        {alert.message}
-      </SnackbarAlert>
-      {toolbarTarget &&
-        ReactDOM.createPortal(
-          <Box sx={{ minWidth: { xs: 120, sm: 150 } }}>
-            <Select
-              value={sortOrder}
-              options={SORT_OPTIONS}
-              onChange={setSortOrder}
-              styles={selectSortTheme}
-              menuPortalTarget={document.body}
-              menuPosition="fixed"
-              blurInputOnSelect
-              isSearchable={false}
-            />
-          </Box>,
-          toolbarTarget,
-        )}
-      <Box>
-        <Grid container item justifyContent="center">
-          <Grid item xs={12}>
-            <Box>
-              <Box>
-                {loading && <LoadingSpinner />}
-                {!loading && (
-                  <VideoCards videos={sortedVideos} authenticated={authenticated} feedView={true} size={cardSize} />
-                )}
-              </Box>
-            </Box>
-          </Grid>
-        </Grid>
-      </Box>
-    </>
-  )
-}
-
-export default Feed
diff --git a/app/client/src/views/GameVideos.js b/app/client/src/views/GameVideos.js
index bfeb40fd..4681d316 100644
--- a/app/client/src/views/GameVideos.js
+++ b/app/client/src/views/GameVideos.js
@@ -370,7 +370,20 @@ const GameVideos = ({ cardSize, authenticated, searchText }) => {
             {authenticated && (
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'nowrap', minWidth: 0 }}>
                 {editMode && (
-                  <ButtonGroup variant="contained" sx={{ height: 38, flexShrink: 1, minWidth: 0, '& .MuiButton-root': { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', px: { xs: 1, sm: 2 } } }}>
+                  <ButtonGroup
+                    variant="contained"
+                    sx={{
+                      height: 38,
+                      flexShrink: 1,
+                      minWidth: 0,
+                      '& .MuiButton-root': {
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        px: { xs: 1, sm: 2 },
+                      },
+                    }}
+                  >
                     <Button color="primary" onClick={handleSelectAllToggle}>
                       {isAllSelected ? 'Select None' : 'Select All'}
                     </Button>
@@ -439,7 +452,7 @@ const GameVideos = ({ cardSize, authenticated, searchText }) => {
         onPrev={handleImageModalPrev}
       />
 
-      <Box sx={{ p: 3 }}>
+      <Box sx={{ px: 2 }}>
         {sortedMedia.length === 0 ? (
           <Box
             sx={{
@@ -460,7 +473,7 @@ const GameVideos = ({ cardSize, authenticated, searchText }) => {
             sx={{
               display: 'grid',
               gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${cardSize}px), 1fr))`,
-              gap: '24px',
+              gap: 2,
             }}
           >
             {sortedMedia.map((media, index) => (
diff --git a/app/client/src/views/Games.js b/app/client/src/views/Games.js
index 175a1853..a3f0d152 100644
--- a/app/client/src/views/Games.js
+++ b/app/client/src/views/Games.js
@@ -162,7 +162,7 @@ const Games = ({ authenticated, searchText }) => {
   if (loading) return <LoadingSpinner />
 
   return (
-    <Box sx={{ p: 3 }}>
+    <Box>
       <>
         {toolbarTarget
           ? ReactDOM.createPortal(
@@ -176,7 +176,12 @@ const Games = ({ authenticated, searchText }) => {
                           height: 38,
                           flexShrink: 1,
                           minWidth: 0,
-                          '& .MuiButton-root': { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', px: { xs: 1, sm: 2 } },
+                          '& .MuiButton-root': {
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            px: { xs: 1, sm: 2 },
+                          },
                         }}
                       >
                         <Button color="primary" onClick={handleSelectAllToggle}>
diff --git a/app/client/src/views/ImageFeed.js b/app/client/src/views/ImageFeed.js
index 55cf8680..6a27995b 100644
--- a/app/client/src/views/ImageFeed.js
+++ b/app/client/src/views/ImageFeed.js
@@ -247,7 +247,20 @@ const ImageFeed = ({ authenticated, searchText, cardSize, selectedImageFolder, o
             {authenticated && (
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'nowrap', minWidth: 0 }}>
                 {editMode && (
-                  <ButtonGroup variant="contained" sx={{ height: 38, flexShrink: 1, minWidth: 0, '& .MuiButton-root': { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', px: { xs: 1, sm: 2 } } }}>
+                  <ButtonGroup
+                    variant="contained"
+                    sx={{
+                      height: 38,
+                      flexShrink: 1,
+                      minWidth: 0,
+                      '& .MuiButton-root': {
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        px: { xs: 1, sm: 2 },
+                      },
+                    }}
+                  >
                     <Button color="primary" onClick={handleSelectAllToggle}>
                       {allSelected ? 'Select None' : 'Select All'}
                     </Button>

From 4d75136d0e71818a916a1de44dacbe7194c91812 Mon Sep 17 00:00:00 2001
From: Shane Israel <shanemisrael@gmail.com>
Date: Fri, 10 Apr 2026 21:56:14 -0600
Subject: [PATCH 2/2] code formatting

---
 app/client/src/common/darkTheme.js            |   2 +-
 app/client/src/common/utils.js                |   6 +-
 .../src/components/admin/ImageFileManager.js  |  54 ++++-
 app/client/src/components/game/GameSearch.js  |  13 +-
 .../src/components/misc/LoadingSpinner.js     |  10 +-
 .../src/components/misc/VideoJSPlayer.js      |   4 +-
 .../src/components/modal/DeleteVideoModal.js  |   3 +-
 .../components/modal/EditGameAssetsModal.js   | 186 ++++++++++--------
 .../src/components/modal/EditImageModal.js    |  16 +-
 .../src/components/modal/MoveVideoModal.js    |   6 +-
 .../components/modal/UpdateDetailsModal.js    |   1 -
 .../components/nav/FolderSuggestionInline.js  |  12 +-
 .../src/components/nav/GameScanStatus.js      |   7 +-
 .../src/components/nav/TranscodingStatus.js   |  36 ++--
 app/client/src/services/AdminSSE.js           |  13 +-
 app/client/src/services/StatsService.js       |  18 +-
 app/client/src/services/VideoService.js       |   4 +-
 app/client/src/views/TagVideos.js             |  32 ++-
 app/client/src/views/Tags.js                  |  16 +-
 19 files changed, 275 insertions(+), 164 deletions(-)

diff --git a/app/client/src/common/darkTheme.js b/app/client/src/common/darkTheme.js
index ce7cea1b..5109bc44 100644
--- a/app/client/src/common/darkTheme.js
+++ b/app/client/src/common/darkTheme.js
@@ -183,7 +183,7 @@ const theme = {
           },
           '&.MuiTypography-body1 > svg': {
             marginTop: 2,
-          },  
+          },
           '& svg:last-child': {
             marginLeft: 2,
           },
diff --git a/app/client/src/common/utils.js b/app/client/src/common/utils.js
index 8c53daac..075f1182 100644
--- a/app/client/src/common/utils.js
+++ b/app/client/src/common/utils.js
@@ -213,9 +213,9 @@ export const getVideoSources = (videoId, videoInfo, extension) => {
 
   // When a cropped version exists, point "Source" at the cropped file instead of the original
   const sourceUrl = hasCrop
-    ? (SERVED_BY === 'nginx'
-        ? `${URL}/_content/derived/${videoId}/${videoId}-cropped.mp4`
-        : `${URL}/api/video?id=${videoId}&quality=cropped`)
+    ? SERVED_BY === 'nginx'
+      ? `${URL}/_content/derived/${videoId}/${videoId}-cropped.mp4`
+      : `${URL}/api/video?id=${videoId}&quality=cropped`
     : getVideoUrl(videoId, 'original', extension)
 
   sources.push({
diff --git a/app/client/src/components/admin/ImageFileManager.js b/app/client/src/components/admin/ImageFileManager.js
index 8440ad82..e1944bdb 100644
--- a/app/client/src/components/admin/ImageFileManager.js
+++ b/app/client/src/components/admin/ImageFileManager.js
@@ -164,7 +164,10 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg
       <TableCell
         padding="checkbox"
         sx={{ borderBottom: '1px solid #FFFFFF0D' }}
-        onClick={(e) => { e.stopPropagation(); onToggle(file.image_id) }}
+        onClick={(e) => {
+          e.stopPropagation()
+          onToggle(file.image_id)
+        }}
       >
         <Checkbox
           size="small"
@@ -178,14 +181,26 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg
       <TableCell sx={{ ...bodyCellSx, maxWidth: 300, overflow: 'hidden' }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, overflow: 'hidden' }}>
           <Tooltip title={displayName} placement="top" enterDelay={600}>
-            <Typography sx={{ fontSize: 13, color: '#FFFFFFCC', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+            <Typography
+              sx={{
+                fontSize: 13,
+                color: '#FFFFFFCC',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                flex: 1,
+              }}
+            >
               {displayName}
             </Typography>
           </Tooltip>
           <Tooltip title="Open in new tab">
             <IconButton
               size="small"
-              onClick={(e) => { e.stopPropagation(); window.open(`/i/${file.image_id}`, '_blank') }}
+              onClick={(e) => {
+                e.stopPropagation()
+                window.open(`/i/${file.image_id}`, '_blank')
+              }}
               sx={{ color: '#FFFFFF33', p: 0.25, flexShrink: 0, '&:hover': { color: '#FFFFFF99' } }}
             >
               <OpenInNewIcon sx={{ fontSize: 13 }} />
@@ -196,7 +211,19 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg
 
       {/* Size */}
       <TableCell sx={{ ...bodyCellSx }}>
-        <Tooltip arrow placement="top" title={file.derived_size > 0 ? <Box><Typography sx={{ fontSize: 12 }}>Derived: {formatSize(file.derived_size)}</Typography></Box> : ''}>
+        <Tooltip
+          arrow
+          placement="top"
+          title={
+            file.derived_size > 0 ? (
+              <Box>
+                <Typography sx={{ fontSize: 12 }}>Derived: {formatSize(file.derived_size)}</Typography>
+              </Box>
+            ) : (
+              ''
+            )
+          }
+        >
           <Typography sx={{ fontSize: 12, color: '#FFFFFF77' }}>{formatSize(file.size)}</Typography>
         </Tooltip>
       </TableCell>
@@ -204,7 +231,9 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg
       {/* Total Size */}
       {!hiddenColumns.has('Total Size') && (
         <TableCell sx={{ ...bodyCellSx }}>
-          <Typography sx={{ fontSize: 12, color: '#FFFFFF77' }}>{formatSize((file.size || 0) + (file.derived_size || 0))}</Typography>
+          <Typography sx={{ fontSize: 12, color: '#FFFFFF77' }}>
+            {formatSize((file.size || 0) + (file.derived_size || 0))}
+          </Typography>
         </TableCell>
       )}
 
@@ -212,7 +241,17 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg
       {!hiddenColumns.has('Resolution') && (
         <TableCell sx={{ ...bodyCellSx }}>
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Chip label={formatResolution(file.width, file.height)} size="small" sx={{ height: 17, fontSize: 10, bgcolor: '#FFFFFF12', color: '#FFFFFF66', '& .MuiChip-label': { px: 0.75 } }} />
+            <Chip
+              label={formatResolution(file.width, file.height)}
+              size="small"
+              sx={{
+                height: 17,
+                fontSize: 10,
+                bgcolor: '#FFFFFF12',
+                color: '#FFFFFF66',
+                '& .MuiChip-label': { px: 0.75 },
+              }}
+            />
           </Box>
         </TableCell>
       )}
@@ -225,7 +264,8 @@ const ImageFileRow = React.memo(function ImageFileRow({ file, isSelected, onTogg
               label={file.private ? 'Private' : 'Public'}
               size="small"
               sx={{
-                height: 17, fontSize: 10,
+                height: 17,
+                fontSize: 10,
                 bgcolor: file.private ? '#FFFFFF12' : '#1DB95418',
                 color: file.private ? '#FFFFFF66' : '#1DB954',
                 border: '1px solid',
diff --git a/app/client/src/components/game/GameSearch.js b/app/client/src/components/game/GameSearch.js
index a27569fd..f4328eef 100644
--- a/app/client/src/components/game/GameSearch.js
+++ b/app/client/src/components/game/GameSearch.js
@@ -6,7 +6,14 @@ import { GameService } from '../../services'
  * Reusable game search autocomplete component
  * Searches SteamGridDB, creates game if needed, and calls onGameLinked callback
  */
-const GameSearch = ({ onGameLinked, onError, onWarning, disabled = false, placeholder = 'Search for a game...', sx = {} }) => {
+const GameSearch = ({
+  onGameLinked,
+  onError,
+  onWarning,
+  disabled = false,
+  placeholder = 'Search for a game...',
+  sx = {},
+}) => {
   const [selectedGame, setSelectedGame] = React.useState(null)
   const [gameOptions, setGameOptions] = React.useState([])
   const [gameSearchLoading, setGameSearchLoading] = React.useState(false)
@@ -60,9 +67,7 @@ const GameSearch = ({ onGameLinked, onError, onWarning, disabled = false, placeh
           const labels = { heroes: 'hero art', logos: 'logo', icons: 'icon' }
           const missing = created.missing_assets.map((k) => labels[k] || k)
           const missingStr =
-            missing.length > 1
-              ? missing.slice(0, -1).join(', ') + ' and ' + missing[missing.length - 1]
-              : missing[0]
+            missing.length > 1 ? missing.slice(0, -1).join(', ') + ' and ' + missing[missing.length - 1] : missing[0]
           const verb = missing.length > 1 ? 'were' : 'was'
           pendingWarning = `No ${missingStr} ${verb} available on SteamGridDB.`
         }
diff --git a/app/client/src/components/misc/LoadingSpinner.js b/app/client/src/components/misc/LoadingSpinner.js
index 5d8de181..63a03f63 100644
--- a/app/client/src/components/misc/LoadingSpinner.js
+++ b/app/client/src/components/misc/LoadingSpinner.js
@@ -37,7 +37,15 @@ function LoadingProgress({ size, ...rest }) {
 
 export default function LoadingSpinner({ size }) {
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', minHeight: 'calc(100vh - 64px)' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        minHeight: 'calc(100vh - 64px)',
+      }}
+    >
       <LoadingProgress size={size} />
     </Box>
   )
diff --git a/app/client/src/components/misc/VideoJSPlayer.js b/app/client/src/components/misc/VideoJSPlayer.js
index ee506c41..868f68cd 100644
--- a/app/client/src/components/misc/VideoJSPlayer.js
+++ b/app/client/src/components/misc/VideoJSPlayer.js
@@ -52,7 +52,9 @@ function PlayerEffects({ sources, onSourceChange, onTimeUpdate, onReady, startTi
       paused: () => mediaRef.current?.paused ?? true,
       play: () => store.play?.(),
       pause: () => store.pause?.(),
-      seek: (time) => { if (mediaRef.current) mediaRef.current.currentTime = time },
+      seek: (time) => {
+        if (mediaRef.current) mediaRef.current.currentTime = time
+      },
       el: () => mediaRef.current,
     }),
     [store],
diff --git a/app/client/src/components/modal/DeleteVideoModal.js b/app/client/src/components/modal/DeleteVideoModal.js
index 8c010f1e..29724b9a 100644
--- a/app/client/src/components/modal/DeleteVideoModal.js
+++ b/app/client/src/components/modal/DeleteVideoModal.js
@@ -46,7 +46,8 @@ const DeleteVideoModal = ({ open, onClose, videoId, videoIds, alertHandler }) =>
           {isBulk ? `Permanently delete ${count} video${count > 1 ? 's' : ''}?` : 'Permanently delete this video?'}
         </Typography>
         <Typography sx={{ fontSize: 14, color: '#FFFFFFB3', lineHeight: 1.6, mb: 3.5 }}>
-          Deleting this clip will also remove all related data, including thumbnails, transcoded versions, and any edits to its title or date. Are you sure?
+          Deleting this clip will also remove all related data, including thumbnails, transcoded versions, and any edits
+          to its title or date. Are you sure?
         </Typography>
         <Stack direction="row" spacing={1.5}>
           <Button
diff --git a/app/client/src/components/modal/EditGameAssetsModal.js b/app/client/src/components/modal/EditGameAssetsModal.js
index b2dd670e..1a2eb61e 100644
--- a/app/client/src/components/modal/EditGameAssetsModal.js
+++ b/app/client/src/components/modal/EditGameAssetsModal.js
@@ -24,16 +24,43 @@ const modalSx = {
   overflow: 'hidden',
 }
 
-
 const ALL_TABS = [
-  { type: 'banner', label: 'Banner',    aspectRatio: '16 / 5', gridCols: 'repeat(auto-fill, minmax(240px, 1fr))', fit: 'cover',   pool: 'heroes' },
-  { type: 'hero',   label: 'Thumbnail', aspectRatio: '16 / 5', gridCols: 'repeat(auto-fill, minmax(240px, 1fr))', fit: 'cover',   pool: 'heroes' },
-  { type: 'logo',   label: 'Logo',      aspectRatio: '3 / 2',  gridCols: 'repeat(auto-fill, minmax(160px, 1fr))', fit: 'contain', pool: 'logos'  },
-  { type: 'icon',   label: 'Icon',      aspectRatio: '1 / 1',  gridCols: 'repeat(auto-fill, minmax(110px, 1fr))', fit: 'cover',   pool: 'icons'  },
+  {
+    type: 'banner',
+    label: 'Banner',
+    aspectRatio: '16 / 5',
+    gridCols: 'repeat(auto-fill, minmax(240px, 1fr))',
+    fit: 'cover',
+    pool: 'heroes',
+  },
+  {
+    type: 'hero',
+    label: 'Thumbnail',
+    aspectRatio: '16 / 5',
+    gridCols: 'repeat(auto-fill, minmax(240px, 1fr))',
+    fit: 'cover',
+    pool: 'heroes',
+  },
+  {
+    type: 'logo',
+    label: 'Logo',
+    aspectRatio: '3 / 2',
+    gridCols: 'repeat(auto-fill, minmax(160px, 1fr))',
+    fit: 'contain',
+    pool: 'logos',
+  },
+  {
+    type: 'icon',
+    label: 'Icon',
+    aspectRatio: '1 / 1',
+    gridCols: 'repeat(auto-fill, minmax(110px, 1fr))',
+    fit: 'cover',
+    pool: 'icons',
+  },
 ]
 
-const BANNER_TABS = ALL_TABS.filter((t) => t.type !== 'hero')    // Banner, Logo, Icon
-const CARD_TABS   = ALL_TABS.filter((t) => t.type !== 'banner')  // Thumbnail, Logo, Icon
+const BANNER_TABS = ALL_TABS.filter((t) => t.type !== 'hero') // Banner, Logo, Icon
+const CARD_TABS = ALL_TABS.filter((t) => t.type !== 'banner') // Thumbnail, Logo, Icon
 
 // ─── Tab bar item ─────────────────────────────────────────────────────────────
 
@@ -152,92 +179,83 @@ const EditGameAssetsModal = ({ game, open, onClose, onSaved, bannerOnly = false
           }}
         >
           {TABS.map((tab, i) => (
-            <TabItem
-              key={tab.type}
-              tab={tab}
-              isActive={activeTabIndex === i}
-              onClick={() => setActiveTabIndex(i)}
-            />
+            <TabItem key={tab.type} tab={tab} isActive={activeTabIndex === i} onClick={() => setActiveTabIndex(i)} />
           ))}
         </Box>
 
         {/* ── Content area ── */}
         <Box sx={{ flex: 1, overflow: 'auto', p: 3 }}>
           {loadingOptions ? (
-              <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 180 }}>
-                <CircularProgress size={32} sx={{ color: '#3399FF' }} />
-              </Box>
-            ) : currentOptions.length === 0 ? (
-              <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 180 }}>
-                <Typography sx={{ color: '#FFFFFF4D', fontSize: 14 }}>
-                  No options available from SteamGridDB
-                </Typography>
-              </Box>
-            ) : (
-              <Box
-                sx={{
-                  display: 'grid',
-                  gridTemplateColumns: activeTab.gridCols,
-                  gap: 1.5,
-                }}
-              >
-                {currentOptions.map((item) => {
-                  const isSelected = pendingSelections[activeTab.type] === item.url
-                  return (
+            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 180 }}>
+              <CircularProgress size={32} sx={{ color: '#3399FF' }} />
+            </Box>
+          ) : currentOptions.length === 0 ? (
+            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 180 }}>
+              <Typography sx={{ color: '#FFFFFF4D', fontSize: 14 }}>No options available from SteamGridDB</Typography>
+            </Box>
+          ) : (
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: activeTab.gridCols,
+                gap: 1.5,
+              }}
+            >
+              {currentOptions.map((item) => {
+                const isSelected = pendingSelections[activeTab.type] === item.url
+                return (
+                  <Box
+                    key={item.id}
+                    onClick={() => setPendingSelections((prev) => ({ ...prev, [activeTab.type]: item.url }))}
+                    sx={{
+                      position: 'relative',
+                      aspectRatio: activeTab.aspectRatio,
+                      borderRadius: '8px',
+                      overflow: 'hidden',
+                      cursor: 'pointer',
+                      border: '2px solid',
+                      borderColor: isSelected ? '#3399FF' : '#FFFFFF1A',
+                      bgcolor: '#FFFFFF0D',
+                      transition: 'border-color 0.15s ease, transform 0.15s ease',
+                      '&:hover': {
+                        borderColor: isSelected ? '#3399FF' : '#FFFFFF44',
+                        transform: 'scale(1.03)',
+                      },
+                    }}
+                  >
                     <Box
-                      key={item.id}
-                      onClick={() =>
-                        setPendingSelections((prev) => ({ ...prev, [activeTab.type]: item.url }))
-                      }
+                      component="img"
+                      src={item.thumb || item.url}
+                      alt=""
                       sx={{
-                        position: 'relative',
-                        aspectRatio: activeTab.aspectRatio,
-                        borderRadius: '8px',
-                        overflow: 'hidden',
-                        cursor: 'pointer',
-                        border: '2px solid',
-                        borderColor: isSelected ? '#3399FF' : '#FFFFFF1A',
-                        bgcolor: '#FFFFFF0D',
-                        transition: 'border-color 0.15s ease, transform 0.15s ease',
-                        '&:hover': {
-                          borderColor: isSelected ? '#3399FF' : '#FFFFFF44',
-                          transform: 'scale(1.03)',
-                        },
+                        width: '100%',
+                        height: '100%',
+                        objectFit: activeTab.fit,
                       }}
-                    >
+                    />
+                    {isSelected && (
                       <Box
-                        component="img"
-                        src={item.thumb || item.url}
-                        alt=""
                         sx={{
-                          width: '100%',
-                          height: '100%',
-                          objectFit: activeTab.fit,
+                          position: 'absolute',
+                          top: 6,
+                          right: 6,
+                          bgcolor: '#3399FF',
+                          borderRadius: '50%',
+                          width: 22,
+                          height: 22,
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
                         }}
-                      />
-                      {isSelected && (
-                        <Box
-                          sx={{
-                            position: 'absolute',
-                            top: 6,
-                            right: 6,
-                            bgcolor: '#3399FF',
-                            borderRadius: '50%',
-                            width: 22,
-                            height: 22,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                          }}
-                        >
-                          <CheckIcon sx={{ fontSize: 14, color: 'white' }} />
-                        </Box>
-                      )}
-                    </Box>
-                  )
-                })}
-              </Box>
-            )}
+                      >
+                        <CheckIcon sx={{ fontSize: 14, color: 'white' }} />
+                      </Box>
+                    )}
+                  </Box>
+                )
+              })}
+            </Box>
+          )}
         </Box>
 
         {/* ── Footer ── */}
@@ -254,7 +272,11 @@ const EditGameAssetsModal = ({ game, open, onClose, onSaved, bannerOnly = false
               variant="outlined"
               onClick={onClose}
               disabled={saving}
-              sx={{ color: 'white', borderColor: '#FFFFFF44', '&:hover': { borderColor: 'white', bgcolor: '#FFFFFF12' } }}
+              sx={{
+                color: 'white',
+                borderColor: '#FFFFFF44',
+                '&:hover': { borderColor: 'white', bgcolor: '#FFFFFF12' },
+              }}
             >
               Cancel
             </Button>
diff --git a/app/client/src/components/modal/EditImageModal.js b/app/client/src/components/modal/EditImageModal.js
index 04ae0001..1ebe8eac 100644
--- a/app/client/src/components/modal/EditImageModal.js
+++ b/app/client/src/components/modal/EditImageModal.js
@@ -269,7 +269,13 @@ const EditImageModal = ({ open, onClose, image, alertHandler, authenticated, onN
           >
             <TransformComponent
               wrapperStyle={{ width: '100%', height: '100%' }}
-              contentStyle={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+              contentStyle={{
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
             >
               <img
                 src={fullImageUrl}
@@ -303,7 +309,9 @@ const EditImageModal = ({ open, onClose, image, alertHandler, authenticated, onN
                   },
                 }}
               >
-                <ChevronLeftIcon sx={{ color: 'white', fontSize: 44, opacity: 0.75, filter: 'drop-shadow(0 0 4px rgba(0,0,0,0.8))' }} />
+                <ChevronLeftIcon
+                  sx={{ color: 'white', fontSize: 44, opacity: 0.75, filter: 'drop-shadow(0 0 4px rgba(0,0,0,0.8))' }}
+                />
               </Box>
               <Box
                 sx={{
@@ -319,7 +327,9 @@ const EditImageModal = ({ open, onClose, image, alertHandler, authenticated, onN
                   },
                 }}
               >
-                <ChevronRightIcon sx={{ color: 'white', fontSize: 44, opacity: 0.75, filter: 'drop-shadow(0 0 4px rgba(0,0,0,0.8))' }} />
+                <ChevronRightIcon
+                  sx={{ color: 'white', fontSize: 44, opacity: 0.75, filter: 'drop-shadow(0 0 4px rgba(0,0,0,0.8))' }}
+                />
               </Box>
             </>
           )}
diff --git a/app/client/src/components/modal/MoveVideoModal.js b/app/client/src/components/modal/MoveVideoModal.js
index a25af274..530f0fc0 100644
--- a/app/client/src/components/modal/MoveVideoModal.js
+++ b/app/client/src/components/modal/MoveVideoModal.js
@@ -20,11 +20,7 @@ const MoveVideoModal = ({ open, onClose, video, alertHandler }) => {
     VideoService.getUploadFolders()
       .then((res) => {
         const all = res.data?.folders || []
-        setFolders(
-          all
-            .filter((f) => f !== currentFolder)
-            .map((f) => ({ value: f, label: `/videos/${f}/` })),
-        )
+        setFolders(all.filter((f) => f !== currentFolder).map((f) => ({ value: f, label: `/videos/${f}/` })))
       })
       .catch(() => setFolders([]))
   }, [open, currentFolder])
diff --git a/app/client/src/components/modal/UpdateDetailsModal.js b/app/client/src/components/modal/UpdateDetailsModal.js
index 70c67995..64f5e430 100644
--- a/app/client/src/components/modal/UpdateDetailsModal.js
+++ b/app/client/src/components/modal/UpdateDetailsModal.js
@@ -397,7 +397,6 @@ const UpdateDetailsModal = ({
               inputSx={inputSx}
             />
           </LabeledField>
-
         </Stack>
 
         <Stack direction="row" spacing={1.5} sx={{ mt: 4 }}>
diff --git a/app/client/src/components/nav/FolderSuggestionInline.js b/app/client/src/components/nav/FolderSuggestionInline.js
index a409e3f2..218f8fb8 100644
--- a/app/client/src/components/nav/FolderSuggestionInline.js
+++ b/app/client/src/components/nav/FolderSuggestionInline.js
@@ -16,7 +16,7 @@ const FolderSuggestionInline = ({ open, suggestion, folderName, onApplied, onDis
     setLoading(true)
     try {
       const gamesRes = await GameService.getGames()
-      let game = gamesRes.data.find(g => g.steamgriddb_id === suggestion.steamgriddb_id)
+      let game = gamesRes.data.find((g) => g.steamgriddb_id === suggestion.steamgriddb_id)
 
       if (!game) {
         const createRes = await GameService.createGame({
@@ -27,9 +27,7 @@ const FolderSuggestionInline = ({ open, suggestion, folderName, onApplied, onDis
         game = createRes.data
       }
 
-      const linkPromises = suggestion.video_ids.map(videoId =>
-        GameService.linkVideoToGame(videoId, game.id)
-      )
+      const linkPromises = suggestion.video_ids.map((videoId) => GameService.linkVideoToGame(videoId, game.id))
       await Promise.all(linkPromises)
 
       // Create folder rule for auto-tagging future videos
@@ -141,11 +139,7 @@ const FolderSuggestionInline = ({ open, suggestion, folderName, onApplied, onDis
 
   // Collapsed view
   return (
-    <Tooltip
-      title={`Link ${suggestion.video_count} clips to ${suggestion.game_name}?`}
-      arrow
-      placement="right"
-    >
+    <Tooltip title={`Link ${suggestion.video_count} clips to ${suggestion.game_name}?`} arrow placement="right">
       <Box
         sx={{
           m: 1,
diff --git a/app/client/src/components/nav/GameScanStatus.js b/app/client/src/components/nav/GameScanStatus.js
index 93bb2276..1790df09 100644
--- a/app/client/src/components/nav/GameScanStatus.js
+++ b/app/client/src/components/nav/GameScanStatus.js
@@ -10,7 +10,7 @@ const spinAnimation = {
   '@keyframes spin': {
     '0%': { transform: 'rotate(0deg)' },
     '100%': { transform: 'rotate(360deg)' },
-  }
+  },
 }
 
 const GameScanStatus = ({ open, onComplete, authenticated }) => {
@@ -87,9 +87,8 @@ const GameScanStatus = ({ open, onComplete, authenticated }) => {
     )
   }
 
-  const tooltipText = scanStatus.total === 0
-    ? 'Preparing scan...'
-    : `Scanning: ${scanStatus.current}/${scanStatus.total}`
+  const tooltipText =
+    scanStatus.total === 0 ? 'Preparing scan...' : `Scanning: ${scanStatus.current}/${scanStatus.total}`
 
   return (
     <Tooltip title={tooltipText} arrow placement="right">
diff --git a/app/client/src/components/nav/TranscodingStatus.js b/app/client/src/components/nav/TranscodingStatus.js
index 9575db94..c84ae4f6 100644
--- a/app/client/src/components/nav/TranscodingStatus.js
+++ b/app/client/src/components/nav/TranscodingStatus.js
@@ -69,9 +69,7 @@ const TranscodingStatus = ({ open, authenticated }) => {
       <Box sx={{ ...styles.card, ...styles.cardExpanded }}>
         <Grid container alignItems="center">
           <Grid item>
-            <Typography sx={styles.textPrimary}>
-              {stoppedMessage}
-            </Typography>
+            <Typography sx={styles.textPrimary}>{stoppedMessage}</Typography>
           </Grid>
         </Grid>
       </Box>
@@ -91,15 +89,14 @@ const TranscodingStatus = ({ open, authenticated }) => {
                   <>
                     Transcoding:{' '}
                     <Box component="span" sx={styles.textAccent}>
-                      {status.current + status.completed_tasks}/{status.total + status.completed_tasks + status.queue_tasks}
+                      {status.current + status.completed_tasks}/
+                      {status.total + status.completed_tasks + status.queue_tasks}
                     </Box>
                   </>
                 )}
               </Typography>
               {status.current_video && (
-                <Typography sx={{ ...styles.textSecondary, ...styles.truncate }}>
-                  {status.current_video}
-                </Typography>
+                <Typography sx={{ ...styles.textSecondary, ...styles.truncate }}>{status.current_video}</Typography>
               )}
               {typeof status.percent === 'number' && (
                 <Box sx={{ mt: 1, width: '100%' }}>
@@ -134,22 +131,25 @@ const TranscodingStatus = ({ open, authenticated }) => {
     )
   }
 
-  const tooltipText = status.total === 0
-    ? 'Preparing transcode...'
-    : `Transcoding: ${status.current + status.completed_tasks}/${status.total + status.completed_tasks + status.queue_tasks}${status.current_video ? `\n${status.current_video}` : ''}`
+  const tooltipText =
+    status.total === 0
+      ? 'Preparing transcode...'
+      : `Transcoding: ${status.current + status.completed_tasks}/${status.total + status.completed_tasks + status.queue_tasks}${status.current_video ? `\n${status.current_video}` : ''}`
 
   return (
     <Tooltip title={tooltipText} arrow placement="right">
       <Box sx={{ ...styles.card, ...styles.cardCollapsed }}>
         <IconButton sx={{ p: 0.5, pointerEvents: 'all' }}>
-          <SyncIcon sx={{
-            color: '#EBEBEB',
-            animation: 'spin 1.5s linear infinite',
-            '@keyframes spin': {
-              '0%': { transform: 'rotate(360deg)' },
-              '100%': { transform: 'rotate(0deg)' },
-            },
-          }} />
+          <SyncIcon
+            sx={{
+              color: '#EBEBEB',
+              animation: 'spin 1.5s linear infinite',
+              '@keyframes spin': {
+                '0%': { transform: 'rotate(360deg)' },
+                '100%': { transform: 'rotate(0deg)' },
+              },
+            }}
+          />
         </IconButton>
       </Box>
     </Tooltip>
diff --git a/app/client/src/services/AdminSSE.js b/app/client/src/services/AdminSSE.js
index a529e5c7..8db46b29 100644
--- a/app/client/src/services/AdminSSE.js
+++ b/app/client/src/services/AdminSSE.js
@@ -1,7 +1,9 @@
 import { getUrl } from '../common/utils'
 
 const getAdminStreamBaseUrl = () => {
-  const isLocalhost = (window.location.hostname.indexOf('localhost') >= 0 || window.location.hostname.indexOf('127.0.0.1') >= 0) && window.location.port !== ''
+  const isLocalhost =
+    (window.location.hostname.indexOf('localhost') >= 0 || window.location.hostname.indexOf('127.0.0.1') >= 0) &&
+    window.location.port !== ''
   if (isLocalhost) {
     return `http://${window.location.hostname}:${import.meta.env.VITE_SERVER_PORT || '3001'}`
   }
@@ -50,10 +52,7 @@ class AdminSSEManager {
   // ═══════════════════════════════════════════════════════════════════════════
 
   connect() {
-    this.eventSource = new EventSource(
-      `${getAdminStreamBaseUrl()}/api/admin/stream`,
-      { withCredentials: true }
-    )
+    this.eventSource = new EventSource(`${getAdminStreamBaseUrl()}/api/admin/stream`, { withCredentials: true })
 
     this.eventSource.addEventListener('transcoding', (e) => {
       const data = JSON.parse(e.data)
@@ -61,13 +60,13 @@ class AdminSSEManager {
         window.dispatchEvent(new CustomEvent('transcodingStarted'))
       }
       this.lastTranscodingStatus = data
-      this.transcodingSubscribers.forEach(cb => cb(data))
+      this.transcodingSubscribers.forEach((cb) => cb(data))
     })
 
     this.eventSource.addEventListener('gameScan', (e) => {
       const data = JSON.parse(e.data)
       this.lastGameScanStatus = data
-      this.gameScanSubscribers.forEach(cb => cb(data))
+      this.gameScanSubscribers.forEach((cb) => cb(data))
     })
   }
 
diff --git a/app/client/src/services/StatsService.js b/app/client/src/services/StatsService.js
index ce8e47ad..17038da1 100644
--- a/app/client/src/services/StatsService.js
+++ b/app/client/src/services/StatsService.js
@@ -1,18 +1,18 @@
-import Api from './Api'; // Uses axios setup with baseURL
+import Api from './Api' // Uses axios setup with baseURL
 
 const StatsService = {
   async getFolderSize() {
     try {
-      const res = await Api().get('/api/folder-size'); // No need for full localhost URL
-      return res.data; // Return raw data, let component decide how to use
+      const res = await Api().get('/api/folder-size') // No need for full localhost URL
+      return res.data // Return raw data, let component decide how to use
     } catch (error) {
-      console.error('Failed to fetch folder size:', error);
-      throw error;
+      console.error('Failed to fetch folder size:', error)
+      throw error
     }
   },
   getGameScanStatus() {
-    return Api().get('/api/scan-games/status');
-  }
-};
+    return Api().get('/api/scan-games/status')
+  },
+}
 
-export default StatsService;
+export default StatsService
diff --git a/app/client/src/services/VideoService.js b/app/client/src/services/VideoService.js
index 1e3eafcc..a6f7ba48 100644
--- a/app/client/src/services/VideoService.js
+++ b/app/client/src/services/VideoService.js
@@ -98,7 +98,7 @@ const service = {
       },
       onUploadProgress: (progressEvent) => {
         const progressTotal = (progressEvent.loaded + alreadyUploaded) / totalSize
-        const progress = (progressEvent.loaded) / progressEvent.total
+        const progress = progressEvent.loaded / progressEvent.total
         uploadProgress(progress, progressTotal, {
           loaded: (progressEvent.loaded + alreadyUploaded) / Math.pow(10, 6),
           total: totalSize / Math.pow(10, 6),
@@ -114,7 +114,7 @@ const service = {
       },
       onUploadProgress: (progressEvent) => {
         const progressTotal = (progressEvent.loaded + alreadyUploaded) / totalSize
-        const progress = (progressEvent.loaded) / progressEvent.total
+        const progress = progressEvent.loaded / progressEvent.total
         uploadProgress(progress, progressTotal, {
           loaded: (progressEvent.loaded + alreadyUploaded) / Math.pow(10, 6),
           total: totalSize / Math.pow(10, 6),
diff --git a/app/client/src/views/TagVideos.js b/app/client/src/views/TagVideos.js
index ff64afe2..c46a5e40 100644
--- a/app/client/src/views/TagVideos.js
+++ b/app/client/src/views/TagVideos.js
@@ -46,7 +46,14 @@ const TagVideos = ({ cardSize, authenticated, searchText }) => {
     setToolbarTarget(document.getElementById('navbar-toolbar-extra'))
   }, [])
 
-  const clips = React.useMemo(() => videos.filter((v) => (v.info?.duration || 0) >= 5).slice(0, 6).map((v) => `/api/video/poster?id=${v.video_id}&animated=true`), [videos])
+  const clips = React.useMemo(
+    () =>
+      videos
+        .filter((v) => (v.info?.duration || 0) >= 5)
+        .slice(0, 6)
+        .map((v) => `/api/video/poster?id=${v.video_id}&animated=true`),
+    [videos],
+  )
 
   React.useEffect(() => {
     if (clips.length <= 1) return
@@ -57,7 +64,9 @@ const TagVideos = ({ cardSize, authenticated, searchText }) => {
   }, [clips.length])
 
   React.useEffect(() => {
-    videoRefs.current.forEach((v) => { if (v) v.play().catch(() => {}) })
+    videoRefs.current.forEach((v) => {
+      if (v) v.play().catch(() => {})
+    })
   }, [clips])
 
   const sortedVideos = React.useMemo(() => {
@@ -114,13 +123,17 @@ const TagVideos = ({ cardSize, authenticated, searchText }) => {
           <Box
             key={src}
             component="video"
-            ref={(el) => { videoRefs.current[i] = el }}
+            ref={(el) => {
+              videoRefs.current[i] = el
+            }}
             src={src}
             autoPlay
             muted
             loop
             playsInline
-            onLoadedMetadata={(e) => { e.target.currentTime = (e.target.duration / clips.length) * i }}
+            onLoadedMetadata={(e) => {
+              e.target.currentTime = (e.target.duration / clips.length) * i
+            }}
             sx={{
               position: 'absolute',
               inset: 0,
@@ -167,7 +180,16 @@ const TagVideos = ({ cardSize, authenticated, searchText }) => {
             px: 3,
           }}
         >
-          <Typography sx={{ fontSize: 11, fontWeight: 700, color: '#999', letterSpacing: 1.5, textTransform: 'uppercase', mb: 0.5 }}>
+          <Typography
+            sx={{
+              fontSize: 11,
+              fontWeight: 700,
+              color: '#999',
+              letterSpacing: 1.5,
+              textTransform: 'uppercase',
+              mb: 0.5,
+            }}
+          >
             Tag
           </Typography>
           <Typography
diff --git a/app/client/src/views/Tags.js b/app/client/src/views/Tags.js
index 6f33b95d..026587f2 100644
--- a/app/client/src/views/Tags.js
+++ b/app/client/src/views/Tags.js
@@ -222,7 +222,21 @@ const Tags = ({ authenticated, searchText }) => {
         ReactDOM.createPortal(
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'nowrap', minWidth: 0 }}>
             {editMode && (
-              <ButtonGroup variant="contained" sx={{ height: 38, flexShrink: 1, minWidth: 0, borderRadius: '8px', '& .MuiButton-root': { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', px: { xs: 1, sm: 2 } } }}>
+              <ButtonGroup
+                variant="contained"
+                sx={{
+                  height: 38,
+                  flexShrink: 1,
+                  minWidth: 0,
+                  borderRadius: '8px',
+                  '& .MuiButton-root': {
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    px: { xs: 1, sm: 2 },
+                  },
+                }}
+              >
                 <Button color="primary" onClick={handleSelectAllToggle} sx={{ borderRadius: '8px 0 0 8px' }}>
                   {allSelected ? 'Select None' : 'Select All'}
                 </Button>