feat: fix some stuff

Author: CodeMeAPixel

app/chat/page.tsx

@@ -146,14 +146,14 @@ export default function AskPage() {
         </main>
       </div>
 
-      {/* Mobile layout - positioned relative to allow for fixed header */}
-      <div className="flex flex-col w-full h-full md:hidden relative">
+      {/* Mobile layout */}
+      <div className="flex flex-col w-full h-full md:hidden overflow-hidden">
         <MobileChatHeader
           onMenuClick={() => setMobileDrawerOpen(true)}
           model={model}
           temperature={temperature}
         />
-        <main className="flex-1 h-full flex flex-col">
+        <main className="flex-1 min-h-0 flex flex-col overflow-hidden">
           <ChatInterface
             key={chatKey}
             initialMessages={initialMessages}

content/docs/cfx/common-errors/framework-errors.mdx

@@ -465,7 +465,7 @@ dependencies {
 - [ESX Documentation](https://documentation.esx-framework.org/)
 - [QBCore Documentation](https://docs.qbcore.org/)
 - [Framework Migration Guide](https://docs.fivem.net/docs/scripting-manual/migrating-from-deprecated-methods/)
-- [Multi-Framework Resource Development](/docs/frameworks/multi-framework-development)
+- [Frameworks Overview](/docs/frameworks)
 
 <Callout type="warning">
   Always test your resource with the specific framework version you're

content/docs/guides/server-artifacts.mdx

@@ -39,18 +39,21 @@ FiveM artifacts are the compiled server binaries that power your FiveM server. T
 ### Artifact Channels
 
 <PropertyCard
-  title="Recommended (Stable)"
-  content="Thoroughly tested builds for production servers. Updated weekly as needed. Maximum stability and compatibility guaranteed."
+  type="info"
+  name="Recommended (Stable)"
+  description="Thoroughly tested builds for production servers. Updated weekly as needed. Maximum stability and compatibility guaranteed."
 />
 
 <PropertyCard
-  title="Optional (Beta)"
-  content="Latest features and improvements, updated 2-3 times weekly. Good for testing before production deployment."
+  type="warning"
+  name="Optional (Beta)"
+  description="Latest features and improvements, updated 2-3 times weekly. Good for testing before production deployment."
 />
 
 <PropertyCard
-  title="Latest (Canary/Experimental)"
-  content="Bleeding-edge development builds, not recommended for production. For developers and testers evaluating new features."
+  type="error"
+  name="Latest (Canary/Experimental)"
+  description="Bleeding-edge development builds, not recommended for production. For developers and testers evaluating new features."
 />
 
 ## Checking Current Version

packages/ui/src/components/mdx-components.tsx

@@ -1044,7 +1044,7 @@ interface Step {
 }
 
 interface StepListProps {
-  steps: Step[];
+  steps: (Step | string)[];
   title?: string;
   imagePosition?: "inline" | "below";
 }
@@ -1092,13 +1092,17 @@ export function StepList({
     return null;
   }
 
+  const normalizedSteps: Step[] = steps.map((step) =>
+    typeof step === "string" ? { title: step } : step,
+  );
+
   return (
     <div className="my-4">
       {title && (
         <h4 className="mb-3 font-semibold text-fd-foreground">{title}</h4>
       )}
       <div className="space-y-6">
-        {steps.map((step, index) => {
+        {normalizedSteps.map((step, index) => {
           const alertStyle = step.alert
             ? stepAlertConfig[step.alert.type]
             : null;

packages/ui/src/components/mobile-chat-header.tsx

@@ -25,7 +25,7 @@ const modelDisplayNames: Record<string, string> = {
 
 export function MobileChatHeader({ onMenuClick, model, temperature }: MobileChatHeaderProps) {
   return (
-    <div className="fixed top-0 left-0 right-0 h-12 flex items-center justify-between px-3 border-b bg-fd-background border-fd-border z-[100]">
+    <div className="h-12 flex items-center justify-between px-3 border-b bg-fd-background border-fd-border shrink-0 z-50">
       <div className="flex items-center gap-2">
         <Button variant="ghost" size="icon" onClick={onMenuClick} className="h-8 w-8">
           <Menu className="h-4 w-4" />

packages/ui/src/core/chat/ChatInterface.tsx

@@ -499,7 +499,6 @@ export function ChatInterface({
       className={cn(
         "flex flex-col w-full bg-fd-background/80 backdrop-blur-sm relative",
         fullHeight ? "h-full" : "h-[calc(100vh-12rem)]",
-        "md:mt-0 mt-12",
         "overflow-hidden",
       )}
     >
@@ -572,7 +571,7 @@ export function ChatInterface({
                   delay: index === messages.length - 1 ? 0.1 : 0,
                 }}
                 className={cn(
-                  "flex gap-3",
+                  "flex gap-2 sm:gap-3 min-w-0",
                   message.role === "user" ? "flex-row-reverse" : "flex-row",
                 )}
               >
@@ -595,16 +594,16 @@ export function ChatInterface({
                 {/* Message content */}
                 <div
                   className={cn(
-                    "flex flex-col gap-1 max-w-[calc(100%-3rem)]",
+                    "flex flex-col gap-1 min-w-0 max-w-[85%] sm:max-w-[calc(100%-3rem)]",
                     message.role === "user" ? "items-end" : "items-start",
                   )}
                 >
                   <div
                     className={cn(
-                      "rounded-2xl px-4 py-3 break-words overflow-hidden",
+                      "rounded-2xl px-4 py-3 break-words min-w-0 w-full",
                       message.role === "user"
-                        ? "bg-[#5865F2] text-white rounded-tr-sm"
-                        : "bg-fd-muted/50 border border-fd-border text-fd-foreground rounded-tl-sm",
+                        ? "bg-[#5865F2] text-white rounded-tr-sm overflow-hidden"
+                        : "bg-fd-muted/50 border border-fd-border text-fd-foreground rounded-tl-sm overflow-x-auto",
                     )}
                   >
                     {renderMessageContent(message.content)}
@@ -668,8 +667,8 @@ export function ChatInterface({
                 autoResize();
               }}
               onKeyDown={handleKeyDown}
-              placeholder="Ask about FiveM, RedM, or txAdmin... (Shift+Enter for newline)"
-              className="w-full bg-fd-muted/30 border border-fd-border focus:border-[#5865F2] focus:ring-1 focus:ring-[#5865F2]/20 rounded-xl text-sm resize-none overflow-hidden min-h-[40px] max-h-[160px] px-3 py-2 leading-[1.5] placeholder:text-muted-foreground focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              placeholder="Ask Fixie about FiveM, RedM, txAdmin..."
+              className="w-full bg-fd-muted/30 border border-fd-border focus:border-[#5865F2] focus:ring-1 focus:ring-[#5865F2]/20 rounded-xl text-sm resize-none overflow-hidden min-h-[40px] max-h-[120px] sm:max-h-[160px] px-3 py-2 leading-[1.5] placeholder:text-muted-foreground focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
               disabled={isLoading}
               rows={1}
               style={{ height: "40px" }}