fix css for long URLs

public/assets/styles.css

@@ -15,4 +15,24 @@ h2.site-name .edit-site {
 }
 h2.site-name:hover .edit-site {
   visibility: visible;
-}
+}
+
+.status-table .status {
+  width: 70px;
+}
+.status-table .date {
+  width: 135px;
+}
+.status-table .urls {
+  width: 495px;
+  max-width: 495px;
+  overflow-x: scroll;
+}
+
+.details-table .left {
+  width: 80px;
+}
+.details-table .right {
+  max-width: 620px;
+  overflow-x: scroll;
+}

views/dashboard.php

@@ -31,7 +31,7 @@
   </div>
 
   <? if(count($webmentions)): ?>
-  <table class="ui striped table">
+  <table class="ui striped table status-table">
     <thead>
       <th>Status</th>
       <th>Date</th>
@@ -40,19 +40,19 @@
     <tbody>
     <?php foreach($webmentions as $mention): ?>
       <tr<?= $mention['status'] == 'pending' ? ' class="warning"' : '' ?>>
-        <td>
+        <td class="status">
           <div class="popup" data-content="<?= $mention['status'] ?>">
             <a href="/webmention/<?= $mention['webmention']->token ?>/details">
               <i class="circular inverted <?= $mention['icon'] ?> icon"></i>
             </a>
           </div>
         </td>
-        <td>
+        <td class="date">
           <a href="/webmention/<?= $mention['webmention']->token ?>/details">
             <?= date('M j, g:ia', strtotime($mention['webmention']->created_at)) ?>
           </a>
         </td>
-        <td>
+        <td class="urls">
           source=<a href="<?= $this->e($mention['webmention']->source) ?>"><?= $this->e($mention['webmention']->source) ?></a><br>
           target=<a href="<?= $this->e($mention['webmention']->target) ?>"><?= $this->e($mention['webmention']->target) ?></a>
         </td>

views/webmention-details.php

@@ -4,36 +4,36 @@
 
   <h2>Webmention Request</h2>
 
-  <table class="ui table single line"><tbody>
+  <table class="ui table details-table"><tbody>
     <tr>
-      <td><b>Status</b></td>
-      <td>
+      <td class="left"><b>Status</b></td>
+      <td class="right">
         <i class="circular inverted <?= $icon ?> icon"></i>
         <?= ucfirst($status) ?>
       </td>
     </tr>
     <tr>
-      <td><b>Date</b></td>
-      <td><?= date('M j, g:ia', strtotime($webmention->created_at)) ?></td>
+      <td class="left"><b>Date</b></td>
+      <td class="right"><?= date('M j, g:ia', strtotime($webmention->created_at)) ?></td>
     </tr>
     <tr>
-      <td><b>Source</b></td>
-      <td><a href="<?= $this->e($webmention->source) ?>"><?= $this->e($webmention->source) ?></a></td>
+      <td class="left"><b>Source</b></td>
+      <td class="right"><a href="<?= $this->e($webmention->source) ?>"><?= $this->e($webmention->source) ?></a></td>
     </tr>
     <tr>
-      <td><b>Target</b></td>
-      <td><a href="<?= $this->e($webmention->target) ?>"><?= $this->e($webmention->target) ?></a></td>
+      <td class="left"><b>Target</b></td>
+      <td class="right"><a href="<?= $this->e($webmention->target) ?>"><?= $this->e($webmention->target) ?></a></td>
     </tr>
     <? if($webmention->vouch): ?>
       <tr>
-        <td><b>Vouch</b></td>
-        <td><a href="<?= $this->e($webmention->vouch) ?>"><?= $this->e($webmention->vouch) ?></a></td>
+        <td class="left"><b>Vouch</b></td>
+        <td class="right"><a href="<?= $this->e($webmention->vouch) ?>"><?= $this->e($webmention->vouch) ?></a></td>
       </tr>
     <? endif; ?>
     <? if($webmention->callback): ?>
       <tr>
-        <td><b>Callback URL</b></td>
-        <td><?= $this->e($webmention->callback) ?></td>
+        <td class="left"><b>Callback URL</b></td>
+        <td class="right"><?= $this->e($webmention->callback) ?></td>
       </tr>
     <? endif; ?>
   </tbody></table>