(human) more chat style adjustments

Author: verdverm

extensions/vscode/webviews/chat/src/components/Events/Messages.tsx

@@ -191,7 +191,7 @@ export const ModelMessage = ({pos, evt}:{pos: number, evt: any}) => {
   const defaultOpen = shouldOpenDetails(evt) ? "details" : undefined;
   return (
     <div className={cn(
-      "py-px pl-0.5 rounded",
+      "mr-20 py-px pl-0.5 rounded",
       "bg-linear-to-r from-lime-500/80 from-5% via-[#1e1e1e] via-10% to-[#1e1e1e]",
     )}>
       <div className={cn(

extensions/vscode/webviews/chat/src/components/Welcome.tsx

@@ -1,19 +1,23 @@
 import { useChat } from "@/hooks/useChat"
 
-export const Welcome = () => {
+export const Welcome = ({
+  title = "Welcome",
+  subtitle = "How can I help today?",
+}:{
+  title?: string
+  subtitle?: string
+}) => {
   const { chatState } = useChat()
   const username = chatState?.env?.user
 
   return (
-    <div className="flex flex-col m-auto border border-sky-500/50 rounded-xl px-20 py-10 gap-5">
-      <div className="flex gap-4 items-baseline">
-        <span className="font-thin text-5xl"
-        >Welcome</span>
-        { username && <span className="font-thin text-5xl text-sky-500" >{username}</span> }
-        { !username && <span className="font-thin text-5xl" >to <span className=" text-lime-500">Veggie</span></span> }
+    <div className="flex flex-col m-auto border border-sky-500/50 rounded-xl px-20 py-10 gap-5 justify-stretch text-center">
+      <div className="sm:flex gap-4 item-center sm:items-baseline w-full">
+        <p className="font-thin text-4xl sm:text-5xl mb-4 sm:mb-0">{title}</p>
+        { username && <p className="font-thin text-5xl text-sky-500" >{username}</p> }
+        { !username && <p className="font-thin text-5xl" >to <span className=" text-lime-500">Veggie</span></p> }
       </div>
-      <span className="font-thin text-xl w-full text-center"
-      >How can I help today?</span>
+      <span className="font-thin text-xl w-full">{subtitle}</span>
     </div>
   )
 }