Increase space for comments

Author: hunchr

app/components/timer_session_entry_component.html.erb

@@ -1,14 +1,15 @@
-<tr class="<%= row_classes %>">
-  <td class="td-px-0 w-40">
-    <% issue_link_list(timer_session_entry.issues).each do |issue_link| %>
-      <%= issue_link %>
-      <br>
-    <% end %>
+<tr class="timer-session-table-row <%= row_classes %>">
+  <td class="timer-session-subject" colspan="2">
+    <div class="issue-links">
+      <% issue_link_list(timer_session_entry.issues).each do |issue_link| %>
+        <%= issue_link %><br>
+      <% end %>
+    </div>
+    <p class="comments"><%= timer_session_entry.comments %></p>
   </td>
-  <td class="w-20"><%= timer_session_entry.comments %></td>
-  <td><%= timer_session_entry.formated_session_time %></td>
-  <td><%= format_worked_hours(timer_session_entry.recorded_hours) %></td>
-  <td class="timer-session-table-actions">
+  <td class="whitespace-nowrap"><%= timer_session_entry.formated_session_time %></td>
+  <td class="whitespace-nowrap"><%= format_worked_hours(timer_session_entry.recorded_hours) %></td>
+  <td class="whitespace-nowrap timer-session-table-actions">
     <% if timer_session_entry? %>
       <% if can_continue_entry? %>
         <%= link_to timer_sessions_continue_path(timer_session_entry),

app/views/timer_sessions/index.html.erb

@@ -1,5 +1,5 @@
 <div class="redmine-tracky">
-  <div class="w-75 mx-auto">
+  <div class="w-100">
     <h1 class="text-center"><%= t('timer_sessions.index.title') %></h1>
     <div class="w-100 mt-3" data-timer-session-container>
       <%= render 'timer_container', timer_session: @current_timer_session %>

assets.src/src/styles/time_sessions_table.scss

@@ -1,10 +1,27 @@
 @import 'variables';
 
 .redmine-tracky {
+  .timer-session-table-row {
+    display: flex;
+  }
+
   .timer-sessions-table td {
     text-align: left !important;
   }
 
+  .timer-session-subject {
+    display: flex;
+    flex-grow: 1;
+
+    .issue-links {
+      width: 40%;
+    }
+
+    .comments {
+      width: 60%;
+    }
+  }
+
   .timer-session-table-actions {
     text-align: right !important;
   }

assets.src/src/styles/utils.scss

@@ -28,6 +28,11 @@
     color: #d74427;
   }
 
+  .whitespace-nowrap {
+    white-space: nowrap;
+    width: fit-content;
+  }
+
   .w-20 {
     width: 20% !important;
   }
@@ -57,7 +62,7 @@
   }
 
   @media only screen and (max-width: 480px) {
-    [class*="w-"] {
+    [class*='w-'] {
       width: 100% !important;
     }
   }
@@ -82,6 +87,7 @@
 
   .timer-sessions-table {
     border-collapse: collapse;
+    table-layout: auto;
   }
 
   .timer-sessions-table > td {
@@ -140,7 +146,7 @@
 
   @media only screen and (max-width: 768px) {
     /* For mobile phones: */
-    [class*="col-"] {
+    [class*='col-'] {
       width: 100%;
     }
   }