fix: fixed alignment of cells; overflowing the text in Name column

Author: jr-rk

src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.service.ts

@@ -366,13 +366,13 @@ export class ItemBitstreamsService {
   getColumnSizes(): ResponsiveTableSizes {
     return new ResponsiveTableSizes([
       // Name column
-      new ResponsiveColumnSizes(2, 2, 3, 4, 4),
+      new ResponsiveColumnSizes(3, 3, 3, 3, 3),
       // Description column
-      new ResponsiveColumnSizes(2, 3, 3, 3, 3),
+      new ResponsiveColumnSizes(3, 3, 3, 3, 3),
       // Format column
       new ResponsiveColumnSizes(2, 2, 2, 2, 2),
       // Actions column
-      new ResponsiveColumnSizes(6, 5, 4, 3, 3),
+      new ResponsiveColumnSizes(2, 2, 2, 2, 2),
       // Store synchronization columns
       new ResponsiveColumnSizes(2, 2, 2, 2, 2)
     ]);

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

@@ -38,7 +38,7 @@
           <th id="{{ bundleName }}" class="span" colspan="3" scope="colgroup">
             {{'item.edit.bitstreams.bundle.name' | translate:{ name: bundleName } }}
           </th>
-          <td class="text-center">
+          <td class="{{ columnSizes.columns[3].buildClasses() }} text-center">
 
             <div class="btn-group">
               <button [routerLink]="[itemPageRoute, 'bitstreams', 'new']"
@@ -77,7 +77,7 @@
             </div>
 
           </td>
-          <td></td>
+          <td class="{{ columnSizes.columns[4].buildClasses() }}"></td>
         </tr>
 
         <ng-container *ngFor="let entry of (tableEntries$ | async)">
@@ -86,12 +86,14 @@
 
             <th class="bitstream-name row-element {{ columnSizes.columns[0].buildClasses() }}"
                 scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
-              <div class="drag-handle text-muted float-left p-1 mr-2" tabindex="0" cdkDragHandle
-                   (keydown.enter)="select($event, entry)" (keydown.space)="select($event, entry)" (click)="select($event, entry)">
-                <i class="fas fa-grip-vertical fa-fw"
-                   [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
+              <div class="d-flex align-items-center">
+                <div class="drag-handle text-muted p-1 mr-2" tabindex="0" cdkDragHandle
+                     (keydown.enter)="select($event, entry)" (keydown.space)="select($event, entry)" (click)="select($event, entry)">
+                  <i class="fas fa-grip-vertical fa-fw"
+                     [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
+                </div>
+                <span class="flex-grow-1 text-truncate bitstream-name-text" [title]="entry.name">{{ entry.name }}</span>
               </div>
-              {{ entry.name }}
             </th>
             <td class="row-element {{ columnSizes.columns[1].buildClasses() }}"
                 headers="{{ entry.nameStripped }} {{ bundleName }} description">
@@ -134,7 +136,7 @@
             </td>
             <td class="{{columnSizes.columns[4].buildClasses()}} row-element"
                 headers="{{ entry.nameStripped }} {{ bundleName }} synchronized">
-              <div class="d-flex align-items-center">
+              <div class="d-flex align-items-center justify-content-center">
                 <span class="text-center">
                   <i [class]="isBitstreamSynchronized(entry) ? 'fas fa-check' : 'fas fa-times'"></i>
                 </span>

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.scss

@@ -19,6 +19,15 @@
   font-weight: normal;
 }
 
+.bitstream-name-text {
+  width: 0;
+  overflow: auto;
+}
+
 .table {
   margin-bottom: 0;
 }
+
+.table thead th {
+  vertical-align: middle;
+}