fix: song number overflows to add button when > 999 songs #379

vicwomg · Sep 4, 2024 · a53c9e0 · a53c9e0
1 parent 3cd7d26
commit a53c9e0
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/pikaraoke/templates/files.html b/pikaraoke/templates/files.html
@@ -53,6 +53,19 @@ <h1>
     top: 3px;
     z-index: 20;
   }
+  table {
+    width: 100%;
+    table-layout: auto; /* Allows columns to adjust based on content */
+  }
+  td {
+    word-wrap: break-word; /* Ensures long words break to fit within the cell */
+  }
+  .break-word {
+    word-break: break-all; /* Ensures long words break to fit within the cell */
+  }
+  .mobile-hide {
+    visibility: hidden;
+  }
   @media screen and (max-width: 500px) {
     #alpha-bar {
       font-size: 13px;
@@ -65,9 +78,6 @@ <h1>
       max-width: 22px;
       height: 95vh;
     }
-    .mobile-hide {
-      visibility: hidden;
-    }
   }
 </style>
 {% endblock %} {% block content %}
@@ -102,24 +112,20 @@ <h1>
 <table>
   {% for song in songs %}
   <tr value="{{ song }}">
-    <td width="20px" style="padding: 5px 0px">
-      {{loop.index + pagination.skip}}
-    </td>
-    <td
-      id="{{filename_from_path(song)[0].lower()}}"
-      width="20px"
-      style="padding: 5px 0px 5px 4px"
-    >
+    <td style="padding: 5px 0px">{{loop.index + pagination.skip}}</td>
+    <td id="{{filename_from_path(song)[0].lower()}}" style="padding-right: 0">
       <a
         class="add-song-link has-text-weight-bold has-text-success"
         title="Add '{{filename_from_path(song)}}' to queue"
         href="{{url_for('enqueue')}}?song={{url_escape(song.encode('utf-8','surrogateescape'))}}&user="
         ><i class="icon icon-list-add"></i>
       </a>
     </td>
-    <td class="break-word">{{filename_from_path(song)}}</td>
+    <td class="break-word" style="padding-right: 0">
+      {{filename_from_path(song)}}
+    </td>
     {% if admin %}
-    <td width="20px">
+    <td style="padding-right: 0">
       <a
         class="edit-button"
         href="{{url_for('edit_file')}}?song={{url_escape(song.encode('utf-8','surrogateescape'))}}"