Ensure long table entries are truncated to prevent UI overlap

web/css/src/styles.css

@@ -1979,6 +1979,12 @@ div.l-content > div.l-separator:nth-of-type(4) {
   border-left: 1px solid transparent;
 }
 
+.l-unit__stat-col--left.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .l-unit__stat-col--left.super-compact {
   width: 50px;
 }

web/templates/admin/list_backup.html

@@ -74,7 +74,7 @@
                   <div class="clearfix l-unit__stat-col--left super-compact">
                     <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="backup[]" value="<?php echo $key ?>">
                   </div>
-                  <div class="clearfix l-unit__stat-col--left wide-3"><b><a href="/list/backup/?backup=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('restore')?>"><?=$key?></a></b></div>
+                  <div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="/list/backup/?backup=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('restore')?>"><?=$key?></a></b></div>
                   <!-- START QUICK ACTION TOOLBAR AREA -->
                   <div class="clearfix l-unit__stat-col--left compact-4 text-right">
                     <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/admin/list_cron.html

@@ -88,7 +88,7 @@ sort-star="<? if($_SESSION['favourites']['CRON'][$key] == 1) echo '1'; else echo
         <div class="clearfix l-unit__stat-col--left super-compact">
           <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="job[]" value="<?php echo $key ?>">
         </div>
-        <div class="clearfix l-unit__stat-col--left wide-5"><b><a href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Cron Job')?>"><?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?></a></b></div>
+        <div class="clearfix l-unit__stat-col--left wide-5 truncate"><b><a href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Cron Job')?>"><?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?></a></b></div>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left compact-2 text-right">
           <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/admin/list_db.html

@@ -121,7 +121,7 @@ sort-user="<?=$data[$key]['DBUSER']?>" sort-server="<?=$data[$key]['HOST']?>" so
                 <div class="clearfix l-unit__stat-col--left super-compact">
                   <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="database[]" value="<?php echo $key ?>">
                 </div>
-                <div class="clearfix l-unit__stat-col--left wide-3"><b><a href="/edit/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Database')?>"><?=$key?></a></b></div>
+                <div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="/edit/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Database')?>"><?=$key?></a></b></div>
                 <!-- START QUICK ACTION TOOLBAR AREA -->
                 <div class="clearfix l-unit__stat-col--left text-right compact-2">
                       <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/admin/list_dns.html

@@ -84,7 +84,7 @@ sort-expire="<?=strtotime($data[$key]['EXP'])?>" sort-records="<?=(int)$data[$ke
               <div class="clearfix l-unit__stat-col--left super-compact">
                 <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="domain[]" value="<?php echo $key ?>">
               </div>
-              <div class="clearfix l-unit__stat-col--left wide-3">
+              <div class="clearfix l-unit__stat-col--left wide-3 truncate">
                 <b><a href="/list/dns/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('DNS records')?>: <?=$key?>"><?=$key?></a></b>
                 <?=empty($data[$key]['SRC'])? '' : '<br/>⇢ <span style="font-size:11px;">' . htmlspecialchars($data[$key]['SRC'], ENT_QUOTES) . '</span>'; ?>
               </div>

web/templates/admin/list_dns_rec.html

@@ -64,7 +64,7 @@ v_unit_id="<?=$key?>" v_section="dns_rec">
             <div class="clearfix l-unit__stat-col--left super-compact">
               <input id="check<?=$data[$key]['ID']?>" class="ch-toggle" type="checkbox" name="record[]" value="<?=$data[$key]['ID']?>">
             </div>
-            <div class="clearfix l-unit__stat-col--left small"><b><a href="/edit/dns/?domain=<?=htmlspecialchars($_GET['domain'])?>&record_id=<?=$data[$key]['ID']?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing DNS Record').': '.htmlspecialchars($data[$key]['RECORD'])?>"><? echo substr($data[$key]['RECORD'], 0, 12); if(strlen($data[$key]['RECORD']) > 12 ) echo '...'; ?></a></b></div>
+            <div class="clearfix l-unit__stat-col--left small truncate"><b><a href="/edit/dns/?domain=<?=htmlspecialchars($_GET['domain'])?>&record_id=<?=$data[$key]['ID']?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing DNS Record').': '.htmlspecialchars($data[$key]['RECORD'])?>"><? echo substr($data[$key]['RECORD'], 0, 12); if(strlen($data[$key]['RECORD']) > 12 ) echo '...'; ?></a></b></div>
             <!-- START QUICK ACTION TOOLBAR AREA -->
             <div class="clearfix l-unit__stat-col--left super-compact text-right">
               <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">
@@ -87,7 +87,7 @@ v_unit_id="<?=$key?>" v_section="dns_rec">
             <div class="clearfix l-unit__stat-col--left compact text-center"><?=$data[$key]['PRIORITY']?>&nbsp;</div>
             <div class="clearfix l-unit__stat-col--left compact text-center"><?php if($data[$key]['TTL'] == ''){ echo _('Default'); }else{ echo $data[$key]['TTL'];} ?></div>
             <div class="clearfix l-unit__stat-col--left super-compact"><b>&nbsp;</b></div>
-            <div class="clearfix l-unit__stat-col--left wide-6" style="word-break: break-word;"><?=htmlspecialchars($data[$key]['VALUE'], ENT_QUOTES, 'UTF-8')?></div>
+            <div class="clearfix l-unit__stat-col--left wide-6 truncate" style="word-break: break-word;"><?=htmlspecialchars($data[$key]['VALUE'], ENT_QUOTES, 'UTF-8')?></div>
           </div>
         </div>
       <?}?>

web/templates/admin/list_mail.html

@@ -94,7 +94,7 @@ sort-accounts="<?=$data[$key]['ACCOUNTS']?>" sort-star="<? if($_SESSION['favouri
                   <div class="clearfix l-unit__stat-col--left super-compact">
                     <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="domain[]" value="<?php echo $key ?>">
                   </div>
-                  <div class="clearfix l-unit__stat-col--left wide-3"><b><a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('mail accounts')?>: <?=$key?>"><?=$key?></a></b></div>
+                  <div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('mail accounts')?>: <?=$key?>"><?=$key?></a></b></div>
                   <!-- START QUICK ACTION TOOLBAR AREA -->
                   <div class="clearfix l-unit__stat-col--left text-right compact-4">
                       <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/admin/list_mail_acc.html

@@ -87,7 +87,7 @@ sort-star="<? if($_SESSION['favourites']['MAIL_ACC'][$key."@".$_GET['domain']] =
                 <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="account[]" value="<?php echo $key ?>">
                 <input type="hidden" value="<?php echo $_GET['domain'] ?>" name="domain" />
               </div>
-              <div class="clearfix l-unit__stat-col--left wide-3"><b><a href="/edit/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Mail Account')?>: <?=$key?>@<?=htmlspecialchars($_GET['domain'])?>"><?=$key."@".$_GET['domain']?></a></b></div>
+              <div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="/edit/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Mail Account')?>: <?=$key?>@<?=htmlspecialchars($_GET['domain'])?>"><?=$key."@".$_GET['domain']?></a></b></div>
 
               <!-- START QUICK ACTION TOOLBAR AREA -->
               <div class="clearfix l-unit__stat-col--left text-right compact-4">

web/templates/admin/list_packages.html

@@ -68,7 +68,7 @@ sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>" sort-disk="<?=$data[$key]['U_DI
         <div class="clearfix l-unit__stat-col--left super-compact">
           <input id="check<?=$i?>" class="ch-toggle" type="checkbox" name="user[]" value="<?=$key?>">
         </div>
-            <div class="clearfix l-unit__stat-col--left wide-2"><b><a href="/edit/package/?package=<?=$key?>&token=<?=$_SESSION['token']?>"><?=$key?></b></a></div>
+            <div class="clearfix l-unit__stat-col--left wide-2 truncate"><b><a href="/edit/package/?package=<?=$key?>&token=<?=$_SESSION['token']?>"><?=$key?></b></a></div>
             <!-- START QUICK ACTION TOOLBAR AREA -->
             <div class="clearfix l-unit__stat-col--left text-right compact-3">
                   <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/admin/list_search.html

@@ -75,7 +75,7 @@
           <div class="clearfix l-unit__stat-col--left super-compact">
               &nbsp;
             </div>
-            <div class="clearfix l-unit__stat-col--left wide-5">
+            <div class="clearfix l-unit__stat-col--left wide-5 truncate">
                 <!--<?
                 if ($value['KEY'] == 'RECORD') {
                   $edit_lnk = '/edit/'.$value['TYPE'].'/?domain='.$value['PARENT'].'&record_id='.$value['LINK'].'&user='.$value['USER'];

web/templates/admin/list_web.html

@@ -131,7 +131,7 @@ sort-name="<?=$key?>"  sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>" sort-dis
           <div class="clearfix l-unit__stat-col--left super-compact">
               <input id="check<?=$i?>" class="ch-toggle" type="checkbox" name="domain[]" value="<?=$key?>">
           </div>
-          <div class="clearfix l-unit__stat-col--left wide-4"><b><a href="/edit/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Domain')?>: <?=$key?>"><?=$key?></a></b></div>
+          <div class="clearfix l-unit__stat-col--left wide-4 truncate"><b><a href="/edit/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Domain')?>: <?=$key?>"><?=$key?></a></b></div>
           <!-- START QUICK ACTION TOOLBAR AREA -->
           <div class="clearfix l-unit__stat-col--left compact-4 text-right">
             <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/user/list_cron.html

@@ -88,7 +88,7 @@ sort-star="<? if($_SESSION['favourites']['CRON'][$key] == 1) echo '1'; else echo
         <div class="clearfix l-unit__stat-col--left super-compact">
           <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="job[]" value="<?php echo $key ?>">
         </div>
-        <div class="clearfix l-unit__stat-col--left wide-5"><b><a href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Cron Job')?>"><?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?></a></b></div>
+        <div class="clearfix l-unit__stat-col--left wide-5 truncate"><b><a href="/edit/cron/?job=<?=$data[$key]['JOB']?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Cron Job')?>"><?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?></a></b></div>
         <!-- START QUICK ACTION TOOLBAR AREA -->
         <div class="clearfix l-unit__stat-col--left compact-2 text-right">
           <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/user/list_db.html

@@ -120,7 +120,7 @@ sort-user="<?=$data[$key]['DBUSER']?>" sort-server="<?=$data[$key]['HOST']?>" so
                 <div class="clearfix l-unit__stat-col--left super-compact">
                   <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="database[]" value="<?php echo $key ?>">
                 </div>
-                <div class="clearfix l-unit__stat-col--left wide-3"><b><a href="/edit/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Database')?>"><?=$key?></a></b></div>
+                <div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="/edit/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Database')?>"><?=$key?></a></b></div>
                 <!-- START QUICK ACTION TOOLBAR AREA -->
                 <div class="clearfix l-unit__stat-col--left text-right compact-2">
                       <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/user/list_dns.html

@@ -83,7 +83,7 @@ sort-expire="<?=strtotime($data[$key]['EXP'])?>" sort-records="<?=(int)$data[$ke
               <div class="clearfix l-unit__stat-col--left super-compact">
                 <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="domain[]" value="<?php echo $key ?>">
               </div>
-              <div class="clearfix l-unit__stat-col--left wide-3">
+              <div class="clearfix l-unit__stat-col--left wide-3 truncate">
                 <b><a href="/list/dns/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('DNS records')?>: <?=$key?>"><?=$key?></a></b>
                 <?=empty($data[$key]['SRC']) ? '' : '<br/>⇢ <span style="font-size:11px;">' . htmlspecialchars($data[$key]['SRC'], ENT_QUOTES) . '</span>'; ?>
               </div>

web/templates/user/list_dns_rec.html

@@ -62,7 +62,7 @@ v_unit_id="<?=$key?>" v_section="dns_rec">
             <div class="clearfix l-unit__stat-col--left super-compact">
               <input id="check<?=$data[$key]['ID']?>" class="ch-toggle" type="checkbox" name="record[]" value="<?=$data[$key]['ID']?>">
             </div>
-            <div class="clearfix l-unit__stat-col--left small"><b><a href="/edit/dns/?domain=<?=htmlspecialchars($_GET['domain'])?>&record_id=<?=$data[$key]['ID']?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing DNS Record').': '.htmlspecialchars($data[$key]['RECORD'])?>"><? echo substr($data[$key]['RECORD'], 0, 12); if(strlen($data[$key]['RECORD']) > 12 ) echo '...'; ?></a></b></div>
+            <div class="clearfix l-unit__stat-col--left small truncate"><b><a href="/edit/dns/?domain=<?=htmlspecialchars($_GET['domain'])?>&record_id=<?=$data[$key]['ID']?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing DNS Record').': '.htmlspecialchars($data[$key]['RECORD'])?>"><? echo substr($data[$key]['RECORD'], 0, 12); if(strlen($data[$key]['RECORD']) > 12 ) echo '...'; ?></a></b></div>
             <!-- START QUICK ACTION TOOLBAR AREA -->
             <div class="clearfix l-unit__stat-col--left compact text-right">
               <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/user/list_mail.html

@@ -93,7 +93,7 @@ sort-accounts="<?=$data[$key]['ACCOUNTS']?>" sort-star="<? if($_SESSION['favouri
                   <div class="clearfix l-unit__stat-col--left super-compact">
                     <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="domain[]" value="<?php echo $key ?>">
                   </div>
-                  <div class="clearfix l-unit__stat-col--left wide-3"><b><a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('mail accounts')?>: <?=$key?>"><?=$key?></a></b></div>
+                  <div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('mail accounts')?>: <?=$key?>"><?=$key?></a></b></div>
                   <!-- START QUICK ACTION TOOLBAR AREA -->
                   <div class="clearfix l-unit__stat-col--left text-right compact-4">
                       <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">

web/templates/user/list_mail_acc.html

@@ -87,7 +87,7 @@ sort-star="<? if($_SESSION['favourites']['MAIL_ACC'][$key."@".$_GET['domain']] =
                 <input id="check<?php echo $i ?>" class="ch-toggle" type="checkbox" name="account[]" value="<?php echo $key ?>">
                 <input type="hidden" value="<?php echo $_GET['domain'] ?>" name="domain" />
               </div>
-              <div class="clearfix l-unit__stat-col--left wide-3"><b><a href="/edit/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Mail Account')?>: <?=$key?>@<?=htmlspecialchars($_GET['domain'])?>"><?=$key."@".$_GET['domain']?></a></b></div>
+              <div class="clearfix l-unit__stat-col--left wide-3 truncate"><b><a href="/edit/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Mail Account')?>: <?=$key?>@<?=htmlspecialchars($_GET['domain'])?>"><?=$key."@".$_GET['domain']?></a></b></div>
 
               <!-- START QUICK ACTION TOOLBAR AREA -->
               <div class="clearfix l-unit__stat-col--left text-right compact-4">

web/templates/user/list_search.html

@@ -73,7 +73,7 @@
           <div class="clearfix l-unit__stat-col--left super-compact">
               &nbsp;
             </div>
-            <div class="clearfix l-unit__stat-col--left wide-5">
+            <div class="clearfix l-unit__stat-col--left wide-5 truncate">
                 <!--<?
                 if ($value['KEY'] == 'RECORD') {
                   $edit_lnk = '/edit/'.$value['TYPE'].'/?domain='.$value['PARENT'].'&record_id='.$value['LINK'].'&user='.$value['USER'];

web/templates/user/list_web.html

@@ -136,7 +136,7 @@ sort-name="<?=$key?>"  sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>" sort-dis
           <div class="clearfix l-unit__stat-col--left super-compact">
               <input id="check<?=$i?>" class="ch-toggle" type="checkbox" name="domain[]" value="<?=$key?>">
           </div>
-          <div class="clearfix l-unit__stat-col--left wide-4"><b><a href="/edit/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Domain')?>: <?=$key?>"><?=$key?></a></b></div>
+          <div class="clearfix l-unit__stat-col--left wide-4 truncate"><b><a href="/edit/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?=_('Editing Domain')?>: <?=$key?>"><?=$key?></a></b></div>
           <!-- START QUICK ACTION TOOLBAR AREA -->
           <div class="clearfix l-unit__stat-col--left compact-4 text-right">
             <div class="l-unit-toolbar__col l-unit-toolbar__col--right noselect">