UI alignment at view Jobs.

src/components/ServiceProject/JobComments.jsx

@@ -119,10 +119,20 @@ const JobComments = ({ data }) => {
             </div>
           </div>
 
-          <div className="d-flex justify-content-end gap-3 align-items-center text-end mt-3">
+          <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"
@@ -136,21 +146,22 @@ const JobComments = ({ data }) => {
                     e.target.value = "";
                   }}
                 />
-              <i className="bx bx-paperclip"></i>
+                <i className="bx bx-sm bx-paperclip mb-1 me-1"></i>
                 Add Attachment
               </div>
+
               <button
-              className="btn btn-primary btn-sm px-3"
+                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-send me-1"></i>
+                <i className="bx bx-xs bx-send me-1"></i>
                 Submit
               </button>
+
             </div>
-          {files?.length > 0 && (
+          </div>
-            <Filelist files={files} removeFile={removeFile} />
+
-          )}
         </form>
       </div>
       <div className="card-body p-0">