Remove hover scale effects and optimize mobile UI transitions

components/editor/comic-canvas.tsx

@@ -82,7 +82,7 @@ export function ComicCanvas({
         </div>
 
         {/* Action buttons below the page image */}
-        <div className="flex items-center justify-center gap-2 mt-4">
+        <div className="hidden md:flex items-center justify-center gap-2 mt-4">
           {onInfoClick && (
             <Button
               variant="ghost"
@@ -123,10 +123,23 @@ export function ComicCanvas({
         </div>
 
         <div className="flex flex-col items-center gap-3 mt-4">
-          {/* <div className="text-xs text-muted-foreground">Page {page.id}</div> */}
+          <div className="text-xs text-muted-foreground md:hidden">
+            Page {pageIndex + 1} of {totalPages}
+          </div>
 
           {/* Mobile action buttons */}
           <div className="flex items-center gap-2 md:hidden">
+            {onInfoClick && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-secondary text-muted-foreground hover:text-white h-9 w-9"
+                onClick={onInfoClick}
+              >
+                <Info className="w-4 h-4" />
+              </Button>
+            )}
+
             {isOwner && (
               <Button
                 variant="ghost"

components/editor/page-sidebar.tsx

@@ -33,7 +33,7 @@ export function PageSidebar({
   isOwner = true,
 }: PageSidebarProps) {
   return (
-    <aside className="w-20 md:w-24 border-r border-border/50 bg-background/50 flex flex-col items-center py-4 gap-2 justify-between">
+    <aside className="hidden md:flex md:flex-col md:items-center w-24 border-r border-border/50 bg-background/50 py-4 gap-2 justify-between">
       {/* Top section: page thumbnails */}
       <div className="flex flex-col items-center gap-3">
         {pages.map((page, index) => (
@@ -84,7 +84,7 @@ export function PageSidebar({
             onClick={onAddPage}
             className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
           >
-            <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform group-hover:scale-110" />
+            <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform" />
           </button>
         )}
       </div>

components/ui/story-loader.tsx

@@ -26,7 +26,7 @@ export function StoryLoader({ text = "Loading story..." }: StoryLoaderProps) {
           key={currentSvgIndex} // Force re-render for smooth transition
           src={`/loader/${loaderSvgs[currentSvgIndex]}`}
           alt="Loading..."
-          className="w-full h-full object-contain animate-pulse transition-all duration-700 ease-in-out transform scale-90 hover:scale-110"
+          className="w-full h-full object-contain animate-pulse transition-all duration-700 ease-in-out transform"
           style={{ filter: 'invert(1)' }}
         />
       </div>