arbisoft · usmanpm · Apr 30, 2026 · Apr 30, 2026
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,13 +17,14 @@
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode; params: { language: string } }) {
+  console.log("CLIENT_ID:", process.env.NEXT_PUBLIC_CLIENT_ID);
   return (
     <html lang={DEFAULT_LANGUAGE} dir={DEFAULT_LANGUAGE_DIR}>
       <head>
         <meta name="apple-mobile-web-app-title" content="Arbisoft Session Portal" />
+        <GoogleTagManager gtmId={GTM_ID} />
         {NODE_ENV === "production" && (
           <>
-            <GoogleTagManager gtmId={GTM_ID} />
             <Script
               id="hotjar-init"
               strategy="afterInteractive"

diff --git a/src/components/VideoCard/styled.tsx b/src/components/VideoCard/styled.tsx
@@ -91,29 +91,45 @@ export const VideoCardContainer = styled(Card, {
     }
 
     &.normal-card {
+      height: auto;
+
       .${cardContentClasses.root} {
+        img {
+          aspect-ratio: 16 / 9;
+          height: auto;
+          max-height: unset;
+          min-height: unset;
+        }
+
         .video-detail {
           .${typographyClasses.h3} {
-            font-size: ${pxToRem(16)};
+            font-size: ${pxToRem(14)};
             font-weight: 600;
+            -webkit-line-clamp: 2;
+          }
+
+          .organizer-name,
+          .date-time {
+            font-size: ${pxToRem(13)};
           }
         }
       }
     }
 
     &.related-card {
       display: flex;
-      margin-bottom: 20px;
+      margin-bottom: 16px;
       width: 100%;
 
       .${cardContentClasses.root} {
         flex-direction: row;
-        gap: 10px;
+        gap: 8px;
 
         .image-wrapper {
           border-radius: ${theme.spacing()};
           overflow: hidden;
-          width: 113px;
+          flex-shrink: 0;
+          width: 160px;
 
           .video-player {
             border-radius: ${theme.spacing()};
@@ -132,11 +148,11 @@ export const VideoCardContainer = styled(Card, {
         }
 
         .video-detail {
-          gap: 4px;
-          width: calc(100% - 113px);
+          gap: 3px;
+          width: calc(100% - 168px);
 
           .${typographyClasses.h5} {
-            font-size: ${pxToRem(12)};
+            font-size: ${pxToRem(13)};
             font-weight: 500;
           }
 

diff --git a/src/components/containers/MainLayoutContainer/styled.tsx b/src/components/containers/MainLayoutContainer/styled.tsx
@@ -17,7 +17,7 @@ export const MainContainer = styled(Container, {
 })<MainContainerProps>(({ theme, isSidebarAvailable = true }) => ({
   position: "relative",
   display: "flex",
-  gap: theme.spacing(4),
+  gap: theme.spacing(3),
   paddingTop: theme.spacing(containerTopSpacingMobile),
   paddingInline: theme.spacing(0),
 
@@ -59,7 +59,7 @@ export const ContentContainer = styled(Box)(({ theme }) => ({
 
 export const RightSidebar = styled(Box)({
   flexShrink: 0,
-  width: 300,
+  width: 360,
 });
 
 export const StyledDrawer = styled(Drawer)(({ theme }) => ({

diff --git a/src/components/theme/theme-provider.tsx b/src/components/theme/theme-provider.tsx
@@ -97,7 +97,25 @@
                 },
               },
             },
-            MuiCssBaseline: {
+            MuiOutlinedInput: {
+            styleOverrides: {
+              root: {
+                "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "#fff",
+                },
+              },
+            },
+          },
+          MuiPickersOutlinedInput: {
+            styleOverrides: {
+              root: {
+                "&.Mui-focused .MuiPickersOutlinedInput-notchedOutline": {
+                  borderColor: "#fff",
+                },
+              },
+            },
+          },
+          MuiCssBaseline: {
               /* c8 ignore next 14 */
               styleOverrides: (val) => ({
                 body: {

diff --git a/src/features/VideosListingPage/styled.tsx b/src/features/VideosListingPage/styled.tsx
@@ -11,7 +11,8 @@ export const VideoListingContainer = styled("div", {
 })(({ theme }) => ({
   [".skeleton-loader, .virtuoso-grid-list"]: {
     display: "grid",
-    gap: theme.spacing(3),
+    columnGap: theme.spacing(2),
+    rowGap: theme.spacing(3.5),
     width: "100%",
     gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
 
@@ -20,11 +21,7 @@ export const VideoListingContainer = styled("div", {
     },
 
     [theme.breakpoints.up("lg")]: {
-      gridTemplateColumns: "repeat(auto-fill, minmax(268px, 1fr))",
-    },
-
-    [theme.breakpoints.up("xl")]: {
-      gridTemplateColumns: "repeat(auto-fill, minmax(396px, 1fr))",
+      gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
     },
   },
 }));

diff --git a/src/features/VideosListingPage/videosListingPage.tsx b/src/features/VideosListingPage/videosListingPage.tsx
@@ -97,6 +97,9 @@ const VideosListingPage = () => {
   const isDataLoading =
     isLoading || isUninitialized || !videoListings?.results || (isFetching && page === 1) || isFeatureFetching;
 
+  // eslint-disable-next-line no-console
+  console.warn("[VLP]", { isDataLoading, isLoading, isUninitialized, isFetching, isFeatureFetching, originalPlaylist: (originalArgs as any)?.playlist, apiPlaylist: (apiParams as any)?.playlist, resultsCount: videoListings?.results?.length, firstTitle: videoListings?.results?.[0]?.title });
+
   // Determine what to render based on state
   const renderContent = () => {
     // Error state
@@ -157,6 +160,7 @@ const VideosListingPage = () => {
               href={`/videos/${videoCard.slug}`}
               key={videoCard.id}
               width="100%"
+              height="auto"
             />
           )}
         />