Fullscreen bug fix

app/admin/page.tsx

@@ -149,15 +149,6 @@ export default function AdminDashboard() {
     }));
   };
 
-  const toggleAutoFullscreen = (index: number) => {
-    setIsEditing(prev => ({
-      ...prev,
-      extraMedia: (prev?.extraMedia || []).map((m, i) =>
-        i === index ? { ...m, autoFullscreen: !m.autoFullscreen } : m
-      ),
-    }));
-  };
-
   const handleSaveCard = async () => {
     if (!isEditing) return;
     const generateSafeId = () => 'card-' + Date.now().toString(36) + Math.random().toString(36).substring(2);
@@ -422,6 +413,20 @@ export default function AdminDashboard() {
                   <label className="block text-sm font-semibold text-gray-800 mb-1">Short Description</label>
                   <textarea value={isEditing.shortDescription || ''} onChange={e => setIsEditing({...isEditing, shortDescription: e.target.value})} className={`${inputClasses} h-24 resize-none`} placeholder="Brief summary..." />
                 </div>
+                <div className="bg-gray-50 p-3 rounded-lg border border-gray-200">
+                  <label className="flex items-start gap-3 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={!!isEditing.autoFullscreen}
+                      onChange={e => setIsEditing({ ...isEditing, autoFullscreen: e.target.checked })}
+                      className="w-5 h-5 text-blue-600 rounded mt-0.5"
+                    />
+                    <div>
+                      <span className="block text-sm font-semibold text-gray-900">Auto fullscreen</span>
+                      <span className="block text-xs text-gray-600">Open the gallery in fullscreen immediately when the user clicks this card.</span>
+                    </div>
+                  </label>
+                </div>
               </div>
               <div className="space-y-5">
                 {/* Cover Image */}
@@ -487,28 +492,17 @@ export default function AdminDashboard() {
                               <div className="text-xs font-semibold text-gray-700 uppercase tracking-wider">
                                 {video ? 'Video' : 'Image'}
                               </div>
-                              <div className="flex flex-wrap gap-x-4 gap-y-1 mt-1">
-                                {video && (
-                                  <label className="flex items-center gap-2 cursor-pointer">
-                                    <input
-                                      type="checkbox"
-                                      checked={!!item.autoplay}
-                                      onChange={() => toggleAutoplay(i)}
-                                      className="w-4 h-4 text-blue-600 rounded"
-                                    />
-                                    <span className="text-sm text-gray-700">Autoplay (muted)</span>
-                                  </label>
-                                )}
-                                <label className="flex items-center gap-2 cursor-pointer">
+                              {video && (
+                                <label className="flex items-center gap-2 mt-1 cursor-pointer">
                                   <input
                                     type="checkbox"
-                                    checked={!!item.autoFullscreen}
-                                    onChange={() => toggleAutoFullscreen(i)}
+                                    checked={!!item.autoplay}
+                                    onChange={() => toggleAutoplay(i)}
                                     className="w-4 h-4 text-blue-600 rounded"
                                   />
-                                  <span className="text-sm text-gray-700">Auto fullscreen</span>
+                                  <span className="text-sm text-gray-700">Autoplay (muted)</span>
                                 </label>
-                              </div>
+                              )}
                             </div>
                             <button
                               onClick={() => removeExtraMedia(i)}

components/PublicGrid.tsx

@@ -342,9 +342,7 @@ export default function PublicGrid({ cards, maxCols = 5 }: { cards: Card[], maxC
               key={card.id}
               onClick={() => {
                 setActiveCard(card);
-                // If any media item is flagged auto-fullscreen, open the viewer from the start.
-                const triggers = (card.extraMedia || []).some(m => m.autoFullscreen);
-                if (triggers) setFullscreenIndex(0);
+                if (card.autoFullscreen) setFullscreenIndex(0);
               }}
               className="group relative cursor-pointer overflow-hidden rounded-xl shadow-md aspect-square bg-gray-200 transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
             >
@@ -407,7 +405,10 @@ export default function PublicGrid({ cards, maxCols = 5 }: { cards: Card[], maxC
         <FullscreenViewer
           items={carouselItems}
           startIndex={fullscreenIndex}
-          onClose={() => setFullscreenIndex(null)}
+          onClose={() => {
+            setFullscreenIndex(null);
+            setActiveCard(null);
+          }}
         />
       )}
     </>

types/index.ts

@@ -2,8 +2,7 @@ export type CardType = 'INFO_PAGE' | 'EXTERNAL_LINK' | 'IMAGE_GALLERY' | 'SERVIC
 
 export type MediaItem = {
   url: string;
-  autoplay?: boolean;       // videos only — autoplay muted when shown
-  autoFullscreen?: boolean; // any media — open the fullscreen viewer at this slide on card open
+  autoplay?: boolean; // videos only — autoplay muted when shown
 };
 
 export interface Card {
@@ -17,6 +16,7 @@ export interface Card {
   cardType: CardType;
   actionUrl?: string;
   displayOrder: number;
+  autoFullscreen?: boolean; // open the fullscreen viewer immediately when this card is clicked
 }
 
 export interface Portal {