feat: improve responsiveness of marketplace pack page

Author: lars-berger

packages/settings-ui/src/common/Markdown.tsx

@@ -12,10 +12,15 @@ export function Markdown(props: MarkdownProps) {
       remarkPlugins={[remarkGfm]}
       components={{
         code: props => (
-          <code class="px-1.5 py-0.5 rounded bg-muted font-mono text-sm">
+          <code class="px-1.5 py-0.5 rounded bg-muted font-mono text-sm break-words break-all whitespace-pre-wrap overflow-wrap-anywhere">
             {props.children}
           </code>
         ),
+        pre: props => (
+          <pre class="bg-muted py-3 px-4 rounded my-3 [&_code]:px-0">
+            {props.children}
+          </pre>
+        ),
         h1: props => (
           <h1 class="text-2xl font-bold mt-6 mb-4">{props.children}</h1>
         ),

packages/settings-ui/src/marketplace/MarketplacePackPage.tsx

@@ -138,7 +138,7 @@ export function MarketplacePackPage() {
               </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-[1fr_300px] gap-8">
+            <div class="grid grid-cols-1 md:grid-cols-[1fr_minmax(200px,300px)] gap-8">
               {/* Action buttons and repo - full width on mobile, sidebar on desktop. */}
               <div class="space-y-4 md:order-2 md:col-start-2">
                 <div class="flex flex-col gap-2">
@@ -221,15 +221,9 @@ export function MarketplacePackPage() {
                   </TabsList>
 
                   <TabsContent value="readme" class="space-y-6">
-                    <div class="prose prose-sm dark:prose-invert max-w-none">
-                      <div class="whitespace-pre-line">
-                        <Show when={readmeFile()}>
-                          {readmeFile => (
-                            <Markdown children={readmeFile()} />
-                          )}
-                        </Show>
-                      </div>
-                    </div>
+                    <Show when={readmeFile()}>
+                      {readmeFile => <Markdown children={readmeFile()} />}
+                    </Show>
                   </TabsContent>
 
                   <TabsContent value="widgets" class="space-y-6">