📱 Responsive History section for mobile devices

assets/css/styles.scss

@@ -597,6 +597,11 @@ ol {
   margin: 4px 0 4px;
   padding: 0;
   list-style-type: none;
+
+  ul,
+  ol {
+    margin: 0;
+  }
 }
 
 ul li,

components/history.vue

@@ -5,16 +5,16 @@
         <input aria-label="Search" type="text" placeholder="search history" v-model="filterText" />
       </li>
     </ul>
-    <ul v-if="history.length !== 0">
+    <ul v-if="history.length !== 0" class="labels">
       <div class="show-on-small-screen">
         <li>
           <button class="icon">
-            <i class="material-icons">details</i>
+            <i class="material-icons">star_half</i>
           </button>
         </li>
         <li>
           <button class="icon">
-            <i class="material-icons">change_history</i>
+            <i class="material-icons">history</i>
           </button>
         </li>
       </div>
@@ -89,22 +89,26 @@
             </button>
           </li>
         </div>
+        <div class="show-on-small-screen">
           <li>
             <input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label" />
           </li>
           <li>
             <input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
           </li>
+        </div>
         <li class="method-list-item">
           <input aria-label="Method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}" />
           <span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
         </li>
+        <div class="show-on-small-screen">
           <li>
             <input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" />
           </li>
           <li>
             <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
           </li>
+        </div>
         <transition name="smooth">
           <div v-if="show" class="show-on-small-screen">
             <li>
@@ -194,6 +198,14 @@
     .virtual-list.filled {
       min-height: 320px;
     }
+
+    .labels {
+      display: none;
+    }
+
+    .entry {
+      border-bottom: 1px solid var(--brd-color);
+    }
   }
 
 </style>