chore: mobile view design tweaks

Author: ranst91

typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { ViewerConfig } from "@/types/feature";
 import { cn } from "@/lib/utils";
+import { useMobileView } from "@/utils/use-mobile-view";
 
 interface ViewerLayoutProps extends ViewerConfig {
   className?: string;
@@ -14,12 +15,12 @@ export function ViewerLayout({
   className,
   children,
 }: ViewerLayoutProps) {
-  // return (
-  //
-  // );
+  const { isMobile } = useMobileView();
 
   return (
-    <div className={cn("relative flex h-screen overflow-hidden bg-palette-surface-main p-spacing-2", className)}>
+    <div className={cn("relative flex h-screen overflow-hidden bg-palette-surface-main", className, {
+      "p-spacing-2": !isMobile,
+    })}>
       <div className="flex flex-1 overflow-hidden z-1">
         <main className="flex-1 overflow-auto">
           <div className="h-full">{children}</div>

typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx

@@ -102,8 +102,8 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
   const tabClass = `cursor-pointer flex-1 h-8 px-2 text-sm text-primary shadow-none bg-none border-none font-medium gap-1 rounded-lg data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-none`
 
   return (
-    <div className={`flex flex-col h-full bg-white/50 border-2 overflow-hidden border-palette-border-default
-      ${isMobile ? 'w-80 shadow-xl' : 'w-74 min-w-[296px] flex-shrink-0 rounded-lg'}
+    <div className={`flex flex-col h-full border-2 border-palette-border-default
+      ${isMobile ? 'w-80 shadow-xl bg-white z-99' : 'bg-white/50 w-74 min-w-[296px] flex-shrink-0 rounded-lg overflow-hidden'}
     `}>
       {/* Sidebar Header */}
       <div className="p-4 border-b">