updt

Author: blackphoenix42

src/components/canvas/Array/CanvasToolbar.tsx

@@ -24,6 +24,8 @@ type Props = {
   gridOn: boolean;
   /** Current snap-to-grid state */
   snapOn: boolean;
+  /** Whether the component is being used on mobile */
+  isMobile?: boolean;
 };
 
 /**
@@ -67,6 +69,7 @@ export default function CanvasToolbar({
   onDragging,
   gridOn,
   snapOn,
+  isMobile = false,
 }: Props) {
   const { isFullscreen, enter, exit } = useFullscreen<HTMLDivElement>();
   const full = () => (isFullscreen ? exit() : enter(surfaceRef.current));
@@ -93,7 +96,7 @@ export default function CanvasToolbar({
     }
   };
   // collapse / expand
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(!isMobile);
 
   // small helper for consistent button styling
   const baseBtn =

src/components/controls/ArrayViewPanel.tsx

@@ -37,6 +37,7 @@ export default function ArrayViewPanel({
   onShowLabels,
   showPlane,
   onShowPlane,
+  isMobile = false,
 }: {
   view: View;
   onView: (v: View) => void;
@@ -48,8 +49,9 @@ export default function ArrayViewPanel({
   onShowLabels: (v: boolean) => void;
   showPlane: boolean;
   onShowPlane: (v: boolean) => void;
+  isMobile?: boolean;
 }) {
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(!isMobile);
   const { t } = useI18n();
 
   const upd = (k: keyof Colors) => (e: React.ChangeEvent<HTMLInputElement>) =>

src/components/controls/DatasetPanel.tsx

@@ -102,7 +102,11 @@ const ChevronDownIcon = ({ className = "w-4 h-4" }: { className?: string }) => (
   </svg>
 );
 
-type Props = { value: number[]; onChange: (next: number[]) => void };
+type Props = {
+  value: number[];
+  onChange: (next: number[]) => void;
+  isMobile?: boolean;
+};
 type Dist =
   | "random"
   | "gaussian"
@@ -118,7 +122,11 @@ type Dist =
 
 type SeedMode = "fixed" | "random";
 
-export default function DatasetPanel({ value, onChange }: Props) {
+export default function DatasetPanel({
+  value,
+  onChange,
+  isMobile = false,
+}: Props) {
   const { t } = useI18n();
   const [n, setN] = useState<number>(value.length || 16);
   const [min, setMin] = useState(5);
@@ -134,7 +142,7 @@ export default function DatasetPanel({ value, onChange }: Props) {
   const [customText, setCustomText] = useState("");
 
   // Collapse / expand
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(!isMobile);
 
   useEffect(() => setN(value.length || 16), [value.length]);
 

src/components/export/ExportPanel.tsx

@@ -107,14 +107,14 @@ export default function ExportPanel({
   }
 
   return (
-    <div className="card box-border w-full min-w-0 text-sm">
+    <div className="box-border w-full min-w-0 text-sm">
       <div className="mb-1 font-medium">Export</div>
 
       <div className="grid gap-2">
         <label className="flex min-w-0 items-center gap-2">
           <span className="w-28 shrink-0">Format</span>
           <select
-            className="min-w-0 rounded border px-2 py-1"
+            className="min-w-0 rounded border border-gray-300 bg-white px-2 py-1 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
             value={fmt}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
               setFmt(e.currentTarget.value as typeof fmt)

src/components/panels/AboutPanel.tsx

@@ -30,9 +30,15 @@ function ChevronDownIcon({ open }: { open: boolean }) {
   );
 }
 
-export default function AboutPanel({ meta }: { meta: AlgoMeta }) {
+export default function AboutPanel({
+  meta,
+  isMobile = false,
+}: {
+  meta: AlgoMeta;
+  isMobile?: boolean;
+}) {
   const [modalOpen, setModalOpen] = useState(false);
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(isMobile);
   const { t } = useI18n();
   const { complexity: c } = meta;
 
@@ -47,13 +53,15 @@ export default function AboutPanel({ meta }: { meta: AlgoMeta }) {
         </div>
 
         <div className="flex items-center gap-2">
-          <button
-            className="rounded border border-slate-200 bg-white px-2 py-1 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800/70"
-            onClick={() => setModalOpen(true)}
-            title="Open in modal"
-          >
-            <ExpandIcon />
-          </button>
+          {!isMobile && (
+            <button
+              className="rounded border border-slate-200 bg-white px-2 py-1 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800/70"
+              onClick={() => setModalOpen(true)}
+              title="Open in modal"
+            >
+              <ExpandIcon />
+            </button>
+          )}
           <button
             className="inline-flex items-center justify-center rounded border border-slate-200 bg-white px-2 py-1 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800/70"
             onClick={() => setCollapsed((v) => !v)}

src/components/panels/CodePanel.tsx

@@ -94,18 +94,20 @@ export default function CodePanel({
   explain,
   fillHeight = true,
   onTabChange,
+  isMobile = false,
 }: {
   meta: AlgoMeta;
   activePcLine?: number;
   explain?: string;
   fillHeight?: boolean;
   onTabChange?: (tab: "pseudocode" | "code") => void;
+  isMobile?: boolean;
 }) {
   const [tab, setTab] = useState<"pseudocode" | "code">("pseudocode");
   const [lang, setLang] = useState<Lang>("cpp");
   const [copied, setCopied] = useState(false);
   const [wrap, setWrap] = useState(false);
-  const [collapsed, setCollapsed] = useState(false); // NEW
+  const [collapsed, setCollapsed] = useState(isMobile); // Collapsed by default on mobile
 
   useEffect(() => {
     onTabChange?.(tab);