From 1f10307a3231a8a13439f88370352a4db8063d60 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 13 Apr 2026 03:23:34 +0000
Subject: [PATCH] feat(mq-playground): enhance mobile UI with icon-only buttons
 and file tree support

- Enable sidebar toggle and file tree panel on mobile devices.
- Implement icon-only buttons on mobile view by hiding text labels.
- Add an icon to the "Generate AST" button for mobile consistency.
- Improve file tree layout for mobile vertical stacking without using `!important`.
- Verified changes with Playwright screenshots.

Co-authored-by: harehare <533078+harehare@users.noreply.github.com>
---
 packages/mq-playground/src/Playground.tsx | 19 +++++++++++--------
 packages/mq-playground/src/index.css      | 19 +++++++++++++++++++
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/mq-playground/src/Playground.tsx b/packages/mq-playground/src/Playground.tsx
index 77aed884e..3e6edd436 100644
--- a/packages/mq-playground/src/Playground.tsx
+++ b/packages/mq-playground/src/Playground.tsx
@@ -1554,7 +1554,7 @@ export const Playground = () => {
       {!isEmbed && (
         <header className="playground-header">
           <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-            {isOPFSSupported && isDesktop() && (
+            {isOPFSSupported && (
               <button
                 className="header-icon-button"
                 onClick={toggleSidebar}
@@ -1609,9 +1609,9 @@ export const Playground = () => {
       )}
 
       <div className="playground-content" ref={contentRef}>
-        {isOPFSSupported && isSidebarVisible && isDesktop() && (
+        {isOPFSSupported && isSidebarVisible && (
           <>
-            <div className="file-tree-panel" style={{ width: sidebarWidth }}>
+            <div className="file-tree-panel" style={isDesktop() ? { width: sidebarWidth } : undefined}>
               <FileTree
                 files={files}
                 onFileSelect={handleFileSelect}
@@ -1624,10 +1624,12 @@ export const Playground = () => {
                 selectedFile={selectedFile}
               />
             </div>
-            <ResizeHandle
-              direction="horizontal"
-              onResize={handleSidebarResize}
-            />
+            {isDesktop() && (
+              <ResizeHandle
+                direction="horizontal"
+                onResize={handleSidebarResize}
+              />
+            )}
           </>
         )}
         <div
@@ -1909,7 +1911,8 @@ export const Playground = () => {
                 )}
                 {activeTab === "ast" && (
                   <button className="button" onClick={handleGenerateAst}>
-                    Generate AST
+                    <VscSymbolMethod size={14} />
+                    <span>Generate AST</span>
                   </button>
                 )}
               </div>
diff --git a/packages/mq-playground/src/index.css b/packages/mq-playground/src/index.css
index 452706ecb..706a52f7f 100644
--- a/packages/mq-playground/src/index.css
+++ b/packages/mq-playground/src/index.css
@@ -493,6 +493,25 @@ body {
     padding: 3px 8px;
     font-size: 0.75rem;
   }
+
+  .button span {
+    display: none;
+  }
+
+  .button {
+    padding: 4px;
+    gap: 0;
+  }
+
+  .run-button {
+    padding: 4px 8px;
+  }
+
+  .file-tree-panel {
+    width: 100%;
+    height: 300px;
+    border-bottom: 1px solid var(--tree-border);
+  }
 }
 
 .dropdown {