fixing edit profile overflow input browse

web/css/edit_profile.css

@@ -85,6 +85,7 @@ h1 {
     position: relative;
     margin-left: 10px;
     display: inline-block;
+    overflow: hidden;
 }
 
 .btn {
@@ -130,6 +131,7 @@ input[type=file]{
 .profpict_dummy{
     width: 500px;
 }
+
 input[type=text]{
     width: 625px;
     font-family: 'Arial';

web/edit_profile/view.php

@@ -43,11 +43,17 @@
 
     echo "<div class=\"right\">"    ;
     echo "<p>Update profile picture</p>"    ;
-    echo "<input id=\"profpict_dummy\" class=\"profpict_dummy\"type=\"text\" name=\"profile_picture2\" readonly>"    ;
-    echo "<div class=\"upload-btn-wrapper\">"   ;
-    echo "<button class=\"btn\">Browse ...</button>"    ;
-    echo "<input id=\"profpict\" type=\"file\" name=\"profile_picture\" accept=\"image/png, image/jpg, image/jpeg\" onchange=\"showname()\" >"  ;
-    echo "</div>"   ;
+
+    echo '
+        <div class="flex-container">
+            <input id="profpict_dummy" class="profpict_dummy"type="text" name="profile_picture2" readonly>
+            <div class="upload-btn-wrapper">
+                <button class="btn">Browse ...</button>
+                <input id="profpict" type="file" name="profile_picture" accept="image/png, image/jpg, image/jpeg" onchange="showname()" >
+            </div>   
+        </div>
+    ';
+
     echo "</div>"   ;
     echo "</div>"   ;