feat: hide interface elements on mobile during replay mode and adjust overlay positioning

src/uhm/components/editor/ReplayPreviewOverlay.tsx

@@ -136,19 +136,12 @@ export default function ReplayPreviewOverlay({
                               }
                             : {
                                   position: "absolute",
-                                  left: 18,
-                                  right: 18,
+                                  left: 16,
+                                  right: 16,
+                                  bottom: 20,
                                   pointerEvents: "none",
                                   display: "flex",
                                   justifyContent: "center",
-                                  ...(sidebarOpen
-                                      ? {
-                                            top: 130,
-                                            bottom: "auto",
-                                        }
-                                      : {
-                                            bottom: 110,
-                                        }),
                               }
                     }
                 >
@@ -226,10 +219,10 @@ export default function ReplayPreviewOverlay({
                 <div
                     style={{
                         position: "absolute",
-                        top: 64,
+                        top: isLargeScreen ? 64 : 16,
                         left: "50%",
                         transform: "translateX(-50%)",
-                        width: "min(520px, calc(100% - 72px))",
+                        width: isLargeScreen ? "min(520px, calc(100% - 72px))" : "min(520px, calc(100% - 32px))",
                         borderRadius: 18,
                         border: "1px solid rgba(148, 163, 184, 0.24)",
                         background: "rgba(15, 23, 42, 0.9)",

src/uhm/components/preview/PreviewMapShell.tsx

@@ -63,6 +63,7 @@ type Props = {
     onSidebarHeightChange?: (height: number) => void;
     showViewportControls?: boolean;
     hasAnyBottomPanel?: boolean;
+    isReplayMode?: boolean;
 };
 
 export default function PreviewMapShell({
@@ -113,6 +114,7 @@ export default function PreviewMapShell({
     onSidebarHeightChange,
     showViewportControls = true,
     hasAnyBottomPanel = false,
+    isReplayMode = false,
 }: Props) {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
@@ -187,6 +189,7 @@ export default function PreviewMapShell({
                     height="100svh"
                 />
 
+                {!(isReplayMode && isMobileOrTablet) ? (
                     <TimelineBar
                         year={timelineYear}
                         onYearChange={onTimelineYearChange}
@@ -200,6 +203,7 @@ export default function PreviewMapShell({
                         style={timelineStyle}
                         onPlayReplay={onPlayPreviewReplay}
                     />
+                ) : null}
 
                 <style dangerouslySetInnerHTML={{ __html: `
                     @keyframes slideDown {
@@ -214,6 +218,7 @@ export default function PreviewMapShell({
                     }
                 `}} />
 
+                {!(isReplayMode && isMobileOrTablet) ? (
                     <aside
                         style={{
                             position: "absolute",
@@ -418,6 +423,7 @@ export default function PreviewMapShell({
                         </div>
                     )}
                 </aside>
+                ) : null}
 
 
                 
@@ -461,7 +467,7 @@ export default function PreviewMapShell({
                     </aside>
                 ) : null}
 
-                <ChatbotWidget hideFloatingButton />
+                {!(isReplayMode && isMobileOrTablet) && <ChatbotWidget hideFloatingButton />}
                 {children}
             </div>
         </div>

src/uhm/components/preview/PublicPreviewClientPage.tsx

@@ -825,6 +825,7 @@ export default function PublicPreviewClientPage({
                         onSelectFeatureIds={setSelectedFeatureIds}
                         instantLoad={instantLoad}
                         onToggleInstantLoad={toggleInstantLoad}
+                        isReplayMode={replayMode !== "idle"}
                         isLayerPanelVisible={isLayerPanelVisible}
                         onLayerPanelVisibleChange={setIsLayerPanelVisible}
                         backgroundVisibility={backgroundVisibility}
@@ -888,6 +889,7 @@ export default function PublicPreviewClientPage({
                             ) : null
                         }
                     >
+                        {!(replayMode !== "idle" && !isLargeScreen) ? (
                             <div style={searchBarWrapperStyle}>
                                 <PresentPlaceSearch
                                     focusedPlace={focusedPresentPlace}
@@ -912,6 +914,7 @@ export default function PublicPreviewClientPage({
                                     />
                                 ) : null}
                             </div>
+                        ) : null}
                         <FirstVisitGuideModal />
                     </PreviewMapShell>
                 )}

src/uhm/lib/replay/uiActions.ts

@@ -24,6 +24,12 @@ export const uiActions = {
             setSidebarOpen(false);
             onSelectWiki("");
         } else {
+            // Hạn chế không tự động mở wiki trong chế độ Replay trên mobile/tablet để tránh đè giao diện
+            if (typeof window !== "undefined" && window.innerWidth < 1024) {
+                setSidebarOpen(false);
+                onSelectWiki("");
+                return;
+            }
             setSidebarOpen(true);
             onSelectWiki(wikiId);
         }