fix(docs): mobile styling issues (CopilotKit#519)

* fix(docs): rendering of genreative ui examples on mobile

* fix(docs): render menu icons only in menu

* fix(docs): word wrap button transparent on mobile

Author: arielweinberger

docs/globals.css

@@ -68,6 +68,14 @@ li:has(.icon-container) > div > div > ul ul {
   @apply ml-2 px-2 before:w-[1px];
 }
 
-.nextra-breadcrumb .icon-container .icon { 
+.icon-container .icon { 
   @apply hidden;
+}
+
+.nextra-sidebar-container .icon-container .icon {
+  @apply flex !important;
+}
+
+.nextra-code button[title="Toggle word wrap"] {
+  background: var(--nextra-bg);
 }

docs/pages/concepts/generative-ui.mdx

@@ -4,16 +4,20 @@ import { Frame } from "../../components";
 
 The Generative UI feature allows you to dynamically render React components in the copilot chat window. The components will be updated in real-time as the arguments are streamed.
 
-<Frame>
-  <img
-    src="/images/concepts/generative-ui/render-generative-spreadsheet.gif"
-    className="w-auto"
-  />
-  <img
-    src="/images/concepts/generative-ui/render-generative-presentation.gif"
-    className="w-auto"
-  />
-</Frame>
+<div className="flex flex-col md:flex-row gap-0">
+  <Frame>
+    <img
+      src="/images/concepts/generative-ui/render-generative-spreadsheet.gif"
+      className="w-auto"
+    />
+  </Frame>
+  <Frame>
+    <img
+      src="/images/concepts/generative-ui/render-generative-presentation.gif"
+      className="w-auto"
+    />
+  </Frame>
+  </div>
 
 ## Rendering a UI Component