@streamoid/chat-components 0.2.12 → 0.2.14

package/dist/index.js

@@ -839,7 +839,7 @@ function DynamicForm(props) {
           }
         );
       case "approval":
-        return /* @__PURE__ */ jsxs2("div", { className: "flex gap-2 justify-end", children: [
+        return /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap gap-2 justify-end", children: [
           /* @__PURE__ */ jsxs2(
             Button,
             {
@@ -976,7 +976,7 @@ function DynamicForm(props) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex gap-2 justify-end", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap gap-2 justify-end", children: [
             /* @__PURE__ */ jsxs2(
               Button,
               {
@@ -1067,7 +1067,7 @@ function DynamicForm(props) {
                     children: item.content
                   }
                 ),
-                /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity", children: editingTodoId !== item.id && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-0.5 flex-shrink-0 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity", children: editingTodoId !== item.id && /* @__PURE__ */ jsxs2(Fragment, { children: [
                   /* @__PURE__ */ jsx10(
                     "button",
                     {
@@ -1146,9 +1146,10 @@ function DynamicForm(props) {
             /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center pt-5 pb-6", children: [
               /* @__PURE__ */ jsx10(Upload, { className: "w-8 h-8 mb-2 text-muted-foreground group-hover:text-primary transition-colors" }),
               /* @__PURE__ */ jsxs2("p", { className: "mb-1 text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ jsx10("span", { className: "font-semibold group-hover:text-foreground transition-colors", children: "Click to upload" }),
+                /* @__PURE__ */ jsx10("span", { className: "font-semibold group-hover:text-foreground transition-colors sm:hidden", children: "Tap to upload" }),
+                /* @__PURE__ */ jsx10("span", { className: "font-semibold group-hover:text-foreground transition-colors hidden sm:inline", children: "Click to upload" }),
                 " ",
-                "or drag and drop"
+                /* @__PURE__ */ jsx10("span", { className: "hidden sm:inline", children: "or drag and drop" })
               ] }),
               field.accept && /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground/70", children: [
                 "Accepted: ",
@@ -1241,8 +1242,8 @@ function DynamicForm(props) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs2(Card, { className: "w-[60%] max-w-2xl max-h-[45vh] flex flex-col border border-border bg-card shadow-sm animate-in fade-in duration-300", children: [
-    /* @__PURE__ */ jsxs2(CardHeader, { className: "pb-2 pt-4 px-5 flex-shrink-0", children: [
+  return /* @__PURE__ */ jsxs2(Card, { className: "w-full lg:w-[75%] max-w-2xl max-h-[60vh] lg:max-h-[45vh] flex flex-col border border-border bg-card shadow-sm animate-in fade-in duration-300", children: [
+    /* @__PURE__ */ jsxs2(CardHeader, { className: "pb-2 pt-4 px-3 sm:px-5 flex-shrink-0", children: [
       /* @__PURE__ */ jsx10(CardTitle, { className: "text-sm font-semibold tracking-tight", children: title }),
       description && /* @__PURE__ */ jsx10(CardDescription, { className: "text-xs text-muted-foreground leading-snug", children: description })
     ] }),
@@ -1252,7 +1253,7 @@ function DynamicForm(props) {
         "div",
         {
           ref: scrollRef,
-          className: "px-5 overflow-y-auto flex-1 min-h-0 dynamic-form-scroll",
+          className: "px-3 sm:px-5 overflow-y-auto flex-1 min-h-0 dynamic-form-scroll",
           children: /* @__PURE__ */ jsxs2("div", { className: "space-y-3 pb-2", children: [
             fields.map((field) => {
               const statusText = getFieldStatusText(field);
@@ -1279,7 +1280,7 @@ function DynamicForm(props) {
         }
       ),
       /* @__PURE__ */ jsx10("div", { className: `scroll-fade-bottom ${!canScrollDown ? "fade-hidden" : ""}` }),
-      !(fields.length === 1 && fields[0]?.type === "media_approval") && /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2 px-5 py-2 flex-shrink-0", children: [
+      !(fields.length === 1 && fields[0]?.type === "media_approval") && /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2 px-3 sm:px-5 py-2 flex-shrink-0", children: [
         cancelText && /* @__PURE__ */ jsx10(
           Button,
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/chat-components",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Shared chat UI components for the Streamoid chat host — DynamicForm and other cross-service components",
   "type": "module",
   "main": "./dist/index.js",