fixing text overflow on profile page

web/basic/header.php

@@ -32,7 +32,7 @@ class Header {
                 <link rel="stylesheet" type="text/css" href="../css/color-lib.css">
                 <link rel="stylesheet" type="text/css" href="../css/basic.css">
                 <link rel="stylesheet" href="../css/'.$cssName.'.css">
-                <meta name="viewport" content="width=device-width, initial-scale=5.0">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <script src="../javascript/'.$jsName.'.js"></script>
             </head>
         ';

web/css/basic.css

@@ -225,4 +225,17 @@ a {
 
 #rightbar-pic > div {
     margin-block-end: 10px;
+}
+
+
+.dont-break-out {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
 }
\ No newline at end of file

web/profile/view.php

@@ -26,28 +26,28 @@ function viewProfile (array $params) {
                     Your browser does not support SVG
                 </object>
                 <div class="flex-1">Username</div>
-                <div class="flex-2">@'.$params['username'].'</div>
+                <div class="dont-break-out flex-2">@'.$params['username'].'</div>
             </div>
             <div class="flex-container align-items-flex-center">
                 <object class="icon-profile" type="image/svg+xml" data="../svgIcon/mail.svg">
                     Your browser does not support SVG
                 </object>
                 <div class="flex-1">Email</div>
-                <div class="flex-2">'.$params['email'].'</div>
+                <div class="dont-break-out flex-2">'.$params['email'].'</div>
             </div>
             <div class="flex-container align-items-flex-center">
                 <object class="icon-profile" type="image/svg+xml" data="../svgIcon/home.svg">
                     Your browser does not support SVG
                 </object>            
                 <div class="flex-1">Address</div>
-                <div class="flex-2">'.$params['address'].'</div>
+                <div class="dont-break-out flex-2">'.$params['address'].'</div>
             </div>
             <div class="flex-container align-items-flex-center">
                 <object class="icon-profile" type="image/svg+xml" data="../svgIcon/phone.svg">
                     Your browser does not support SVG
                 </object>
                 <div class="flex-1">Phone Number</div>
-                <div class="flex-2">'.$params['phone'].'</div>
+                <div class="dont-break-out flex-2">'.$params['phone'].'</div>
             </div>
         </div>
     ';