From 49a0e8d6f29ee17b9fec301fecbaf6cb44d84552 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Sat, 11 Apr 2026 01:32:39 +0700
Subject: [PATCH] more styling cleanup

---
 .../components/prompt-box/ImagePromptRow.tsx  | 55 +++++++------------
 .../prompt-box/MediaReferenceRow.tsx          | 24 ++++----
 .../src/pages/create-video/create-video.tsx   |  2 +-
 3 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/frontend/apps/artcraft-website/src/components/prompt-box/ImagePromptRow.tsx b/frontend/apps/artcraft-website/src/components/prompt-box/ImagePromptRow.tsx
index a1e5bb3749..5225dbd939 100644
--- a/frontend/apps/artcraft-website/src/components/prompt-box/ImagePromptRow.tsx
+++ b/frontend/apps/artcraft-website/src/components/prompt-box/ImagePromptRow.tsx
@@ -11,7 +11,6 @@ import {
   faPlus,
   faSpinner,
   faSpinnerThird,
-  faTrashAlt,
   faXmark,
 } from "@fortawesome/pro-solid-svg-icons";
 import { faImage } from "@fortawesome/pro-regular-svg-icons";
@@ -44,7 +43,7 @@ interface ImagePromptRowProps {
   referenceImages: RefImage[];
   setReferenceImages: (images: RefImage[]) => void;
   onPickFromLibrary?: () => void;
-  onClearAll?: () => void;
+  onClearAll?: () => void; // unused, kept for API compat
   className?: string;
 
   // Video mode props
@@ -229,13 +228,16 @@ export const ImagePromptRow = ({
         />
       )}
       <div
-        className={twMerge("glass flex flex-col sm:flex-row rounded-t-xl", className)}
+        className={twMerge(
+          "glass flex flex-col sm:flex-row rounded-t-xl",
+          className,
+        )}
         onMouseDown={(e) => e.stopPropagation()}
         onClick={(e) => e.stopPropagation()}
         onPointerDown={(e) => e.stopPropagation()}
       >
         <div className="flex min-w-0 flex-1 gap-2 px-3 py-2">
-          <div className="flex grow flex-col gap-1">
+          <div className="flex grow flex-col gap-1 min-w-32">
             <div className="flex items-center gap-2 text-white/90">
               <FontAwesomeIcon icon={faImage} className="h-3.5 w-3.5" />
               <span className="flex items-center gap-1.5 text-sm font-medium">
@@ -250,7 +252,7 @@ export const ImagePromptRow = ({
             <span className="text-[13px] text-white/60">{sectionSubtitle}</span>
           </div>
 
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             {allowReorder ? (
               <DndContext
                 sensors={sensors}
@@ -327,7 +329,7 @@ export const ImagePromptRow = ({
                 >
                   <button
                     onClick={() => fileInputRef.current?.click()}
-                    className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
+                    className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
                   >
                     <FontAwesomeIcon
                       icon={faPlus}
@@ -338,7 +340,7 @@ export const ImagePromptRow = ({
               ) : (
                 <button
                   onClick={() => fileInputRef.current?.click()}
-                  className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
+                  className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
                 >
                   <FontAwesomeIcon
                     icon={faPlus}
@@ -351,10 +353,10 @@ export const ImagePromptRow = ({
 
         {/* End frame section */}
         {isVideo && showEndFrameSection && (
-          <div className="flex min-w-0 flex-1 items-stretch gap-3 px-3 sm:pe-3 sm:ps-0 border-t sm:border-t-0 border-white/10">
+          <div className="flex min-w-0 flex-1 items-stretch gap-2 px-3 py-2 sm:py-0 sm:pe-3 sm:ps-0 border-t sm:border-t-0 border-white/10">
             <div className="flex grow gap-1">
               <div className="hidden sm:block w-[1px] bg-white/10" />
-              <div className="flex grow flex-col gap-1 p-2">
+              <div className="flex grow flex-col gap-1 sm:p-2">
                 <div className="flex items-center gap-2 text-white/90">
                   <FontAwesomeIcon icon={faImage} className="h-3.5 w-3.5" />
                   <span className="flex items-center gap-1.5 text-sm font-medium">
@@ -369,7 +371,7 @@ export const ImagePromptRow = ({
             </div>
             <div className="flex items-center gap-2">
               {endFrameImage ? (
-                <div className="group relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
+                <div className="group relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
                   <img
                     src={endFrameImage.url}
                     alt="End frame"
@@ -377,13 +379,13 @@ export const ImagePromptRow = ({
                   />
                   <button
                     onClick={() => setEndFrameImage?.(undefined)}
-                    className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
+                    className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
                   >
                     <FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
                   </button>
                 </div>
               ) : uploadingEndFrame ? (
-                <div className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
+                <div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
                   <FontAwesomeIcon
                     icon={faSpinnerThird}
                     spin
@@ -420,7 +422,7 @@ export const ImagePromptRow = ({
                 >
                   <button
                     onClick={() => endFrameInputRef.current?.click()}
-                    className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
+                    className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
                   >
                     <FontAwesomeIcon
                       icon={faPlus}
@@ -431,7 +433,7 @@ export const ImagePromptRow = ({
               ) : (
                 <button
                   onClick={() => endFrameInputRef.current?.click()}
-                  className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
+                  className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
                 >
                   <FontAwesomeIcon
                     icon={faPlus}
@@ -442,21 +444,6 @@ export const ImagePromptRow = ({
             </div>
           </div>
         )}
-
-        {/* Clear all refs */}
-        {onClearAll && (
-          <div className="flex items-center">
-            <div className="h-full w-[1px] bg-white/10" />
-            <div className="p-2">
-              <button
-                onClick={onClearAll}
-                className="flex h-8 w-8 items-center justify-center rounded-md text-white/50 transition-colors hover:bg-white/10 hover:text-white/80"
-              >
-                <FontAwesomeIcon icon={faTrashAlt} className="h-3.5 w-3.5" />
-              </button>
-            </div>
-          </div>
-        )}
       </div>
     </>
   );
@@ -471,7 +458,7 @@ const ImageThumbnail = ({
   image: RefImage;
   onRemove: (id: string) => void;
 }) => (
-  <div className="group glass relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
+  <div className="group glass relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
     <img
       src={image.url}
       alt="Reference"
@@ -482,7 +469,7 @@ const ImageThumbnail = ({
         e.stopPropagation();
         onRemove(image.id);
       }}
-      className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
+      className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
     >
       <FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
     </button>
@@ -519,7 +506,7 @@ const SortableImage = ({
       style={style}
       {...(allowReorder ? { ...attributes, ...listeners } : {})}
       className={twMerge(
-        "group glass relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-opacity",
+        "group glass relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-opacity",
         allowReorder
           ? "cursor-move hover:border-white/80"
           : "cursor-pointer hover:border-white/80",
@@ -538,7 +525,7 @@ const SortableImage = ({
         }}
         onMouseDown={(e) => e.stopPropagation()}
         onPointerDown={(e) => e.stopPropagation()}
-        className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
+        className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
       >
         <FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
       </button>
@@ -550,7 +537,7 @@ const UploadingThumbnail = ({ file }: { file: File }) => {
   const previewUrl = useMemo(() => URL.createObjectURL(file), [file]);
   useEffect(() => () => URL.revokeObjectURL(previewUrl), [previewUrl]);
   return (
-    <div className="glass relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30">
+    <div className="glass relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30">
       <div className="absolute inset-0">
         <img
           src={previewUrl}
diff --git a/frontend/apps/artcraft-website/src/components/prompt-box/MediaReferenceRow.tsx b/frontend/apps/artcraft-website/src/components/prompt-box/MediaReferenceRow.tsx
index 8fcf72eff8..c7193d029c 100644
--- a/frontend/apps/artcraft-website/src/components/prompt-box/MediaReferenceRow.tsx
+++ b/frontend/apps/artcraft-website/src/components/prompt-box/MediaReferenceRow.tsx
@@ -179,7 +179,7 @@ export const MediaReferenceRow = ({
         onChange={handleAudioUpload}
       />
       <div
-        className={twMerge("glass flex", className)}
+        className={twMerge("glass flex flex-col sm:flex-row", className)}
         onMouseDown={(e) => e.stopPropagation()}
         onClick={(e) => e.stopPropagation()}
         onPointerDown={(e) => e.stopPropagation()}
@@ -200,7 +200,7 @@ export const MediaReferenceRow = ({
               {totalVideoDuration}/{maxVideoRefDuration}s
             </span>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             {referenceVideos.map((video) => (
               <VideoRefTile
                 key={video.id}
@@ -209,7 +209,7 @@ export const MediaReferenceRow = ({
               />
             ))}
             {uploadingVideo && (
-              <div className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
+              <div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
                 <FontAwesomeIcon
                   icon={faSpinnerThird}
                   spin
@@ -220,7 +220,7 @@ export const MediaReferenceRow = ({
             {canAddVideo && (
               <button
                 onClick={() => videoInputRef.current?.click()}
-                className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
+                className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
               >
                 <FontAwesomeIcon
                   icon={faPlus}
@@ -231,7 +231,7 @@ export const MediaReferenceRow = ({
           </div>
         </div>
 
-        <div className="w-[1px] self-stretch bg-white/10" />
+        <div className="h-[1px] sm:h-auto sm:w-[1px] self-stretch bg-white/10 mx-3 sm:mx-0" />
 
         {/* Audio section */}
         <div className="flex grow gap-2 px-3 py-2">
@@ -249,7 +249,7 @@ export const MediaReferenceRow = ({
               {totalAudioDuration}/{maxAudioRefDuration}s
             </span>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             {referenceAudios.map((audio, i) => (
               <AudioRefTile
                 key={audio.id}
@@ -259,7 +259,7 @@ export const MediaReferenceRow = ({
               />
             ))}
             {uploadingAudio && (
-              <div className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
+              <div className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 bg-white/5">
                 <FontAwesomeIcon
                   icon={faSpinnerThird}
                   spin
@@ -270,7 +270,7 @@ export const MediaReferenceRow = ({
             {canAddAudio && (
               <button
                 onClick={() => audioInputRef.current?.click()}
-                className="flex aspect-square w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
+                className="flex aspect-square w-10 sm:w-14 items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-white/25 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10"
               >
                 <FontAwesomeIcon
                   icon={faPlus}
@@ -294,7 +294,7 @@ const VideoRefTile = ({
   video: RefVideo;
   onRemove: (id: string) => void;
 }) => (
-  <div className="group relative aspect-square w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
+  <div className="group relative aspect-square w-10 sm:w-14 overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
     <video
       src={video.url}
       muted
@@ -309,7 +309,7 @@ const VideoRefTile = ({
         e.stopPropagation();
         onRemove(video.id);
       }}
-      className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
+      className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
     >
       <FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
     </button>
@@ -348,7 +348,7 @@ const AudioRefTile = ({
   );
 
   return (
-    <div className="group relative flex aspect-square w-14 cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
+    <div className="group relative flex aspect-square w-10 sm:w-14 cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-white/30 transition-all hover:border-white/80">
       <button
         onClick={handleTogglePlay}
         className="flex h-full w-full items-center justify-center"
@@ -369,7 +369,7 @@ const AudioRefTile = ({
           e.stopPropagation();
           onRemove(audio.id);
         }}
-        className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-black group-hover:opacity-100"
+        className="absolute right-[2px] top-[2px] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white sm:opacity-0 backdrop-blur-md transition-colors hover:bg-black sm:group-hover:opacity-100"
       >
         <FontAwesomeIcon icon={faXmark} className="h-2.5 w-2.5" />
       </button>
diff --git a/frontend/apps/artcraft-website/src/pages/create-video/create-video.tsx b/frontend/apps/artcraft-website/src/pages/create-video/create-video.tsx
index c7886daf88..bcee64af87 100644
--- a/frontend/apps/artcraft-website/src/pages/create-video/create-video.tsx
+++ b/frontend/apps/artcraft-website/src/pages/create-video/create-video.tsx
@@ -891,7 +891,7 @@ export default function CreateVideo() {
                   <button
                     type="button"
                     onClick={() => setIsCharactersModalOpen(true)}
-                    className="flex h-9 items-center justify-center gap-1 rounded-lg border border-white/10 bg-white/[0.08] px-3 text-sm font-medium text-white transition-all duration-150 hover:bg-white/[0.12] active:scale-95"
+                    className="flex h-9 items-center justify-center gap-1 rounded-lg border border-ui-controls-border bg-ui-controls px-3 text-sm font-medium text-base-fg shadow-sm transition-all duration-150 hover:bg-ui-controls/80 active:scale-95"
                   >
                     @Characters
                   </button>