UI alignment at view Jobs.

src/components/ServiceProject/JobComments.jsx

@@ -22,7 +22,7 @@ const JobComments = ({ data }) => {
     formState: { errors },
   } = useAppForm({
     resolver: zodResolver(JobCommentSchema),
-     defaultValues:{ comment: "", attachments: [] }
+    defaultValues: { comment: "", attachments: [] }
   });
 
   const {
@@ -119,38 +119,49 @@ const JobComments = ({ data }) => {
             </div>
           </div>
 
-          <div className="d-flex justify-content-end gap-3 align-items-center text-end mt-3">
-            <div
-              onClick={() => document.getElementById("attachments").click()}
-              className="cursor-pointer"
-            >
-              <input
-                type="file"
-                accept=".pdf,.jpg,.jpeg,.png"
-                id="attachments"
-                multiple
-                className="d-none"
-                {...register("attachments")}
-                onChange={(e) => {
-                  onFileChange(e);
-                  e.target.value = "";
-                }}
-              />
-              <i className="bx bx-paperclip"></i>
-              Add Attachment
+          <div className="d-flex flex-column flex-md-row justify-content-between align-items-start">
+            {/* LEFT SIDE → Uploaded Files */}
+            <div className="flex-grow-1 ms-10 mt-2">
+              {files?.length > 0 && (
+                <Filelist files={files} removeFile={removeFile} />
+              )}
+            </div>
+
+            {/* RIGHT SIDE → Add Attachment + Submit */}
+            <div className="d-flex gap-3 align-items-center text-end mt-3 ms-10 ms-md-0">
+              <div
+                onClick={() => document.getElementById("attachments").click()}
+                className="cursor-pointer"
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                <input
+                  type="file"
+                  accept=".pdf,.jpg,.jpeg,.png"
+                  id="attachments"
+                  multiple
+                  className="d-none"
+                  {...register("attachments")}
+                  onChange={(e) => {
+                    onFileChange(e);
+                    e.target.value = "";
+                  }}
+                />
+                <i className="bx bx-sm bx-paperclip mb-1 me-1"></i>
+                Add Attachment
+              </div>
+
+              <button
+                className="btn btn-primary btn-sm px-1 py-1" // smaller padding + slightly smaller font
+                type="submit"
+                disabled={!watch("comment")?.trim() || isPending}
+              >
+                <i className="bx bx-xs bx-send me-1"></i>
+                Submit
+              </button>
+
             </div>
-            <button
-              className="btn btn-primary btn-sm px-3"
-              type="submit"
-              disabled={!watch("comment")?.trim() || isPending}
-            >
-              <i className="bx bx-send me-1"></i>
-              Submit
-            </button>
           </div>
-          {files?.length > 0 && (
-            <Filelist files={files} removeFile={removeFile} />
-          )}
+
         </form>
       </div>
       <div className="card-body p-0">