Minor Format Updates

Make table fit on small screens
TheWicklowWolf · Nov 7, 2023 · 4cf2c61 · 4cf2c61
1 parent 03ddeb5
commit 4cf2c61
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/static/script.js b/src/static/script.js
@@ -19,7 +19,7 @@ function renderChannels() {
         row.innerHTML = `
                 <td>${channel.Name}</td>
                 <td>${channel.Last_Synced}</td>
-                <td>${channel.Video_Count}</td>
+                <td class="text-center">${channel.Video_Count}</td>
                 <td>
                     <button class="btn btn-sm btn-primary custom-button-width" data-bs-toggle="modal" data-bs-target="#editModal${index}">Edit</button>
                 </td>

diff --git a/src/static/style.css b/src/static/style.css
@@ -40,6 +40,9 @@ body {
 }
 
 @media screen and (max-width: 600px) {
+    .container{
+        max-height: 75vh;
+    }
     h1{
         margin-bottom: 0.1rem!important;
     }

diff --git a/src/templates/base.html b/src/templates/base.html
@@ -79,13 +79,13 @@ <h5 class="modal-title" id="modal-label">Configuration</h5>
     </div>
   </div>
 
-  <div class="container mt-4">
+  <div class="container px-1 mt-4">
     <table class="table">
       <thead class="sticky-top top-0">
         <tr>
           <th>Channel Name</th>
           <th>Last Synced</th>
-          <th>Number of Videos</th>
+          <th>Videos</th>
           <th>Actions</th>
         </tr>
       </thead>