From c88cdf2c6d9d28d6c7c72866f1cad84b84112733 Mon Sep 17 00:00:00 2001
From: itskovacs <itskovacs@proton.me>
Date: Mon, 18 Aug 2025 21:11:31 +0200
Subject: [PATCH] :lipstick: Improve Trip table buttons and column resizer
 display

---
 src/src/app/components/trip/trip.component.html | 10 ++++++----
 src/src/styles.scss                             |  5 +++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/src/app/components/trip/trip.component.html b/src/src/app/components/trip/trip.component.html
index 0c7bd11..f0f0838 100644
--- a/src/src/app/components/trip/trip.component.html
+++ b/src/src/app/components/trip/trip.component.html
@@ -60,9 +60,10 @@
 
       <div class="flex items-center gap-2 print:hidden">
         <div class="hidden md:flex items-center gap-2">
+          <p-button pTooltip="Show filters" icon="pi pi-filter" (click)="toggleFiltering()" text />
+          <div class="border-l border-solid border-gray-700 h-4"></div>
           <p-button pTooltip="Expand table" class="hidden lg:flex" icon="pi pi-arrows-h"
             (click)="isExpanded = !isExpanded" text />
-          <p-button pTooltip="Show filters" icon="pi pi-filter" (click)="toggleFiltering()" text />
           <p-button [pTooltip]="tableExpandableMode ? 'f' : 'Switch table mode, allow column resizing'"
             [icon]="tableExpandableMode ? 'pi pi-arrow-up-right-and-arrow-down-left-from-center' : 'pi pi-arrow-down-left-and-arrow-up-right-to-center'"
             (click)="tableExpandableMode = !tableExpandableMode" text />
@@ -70,6 +71,7 @@
           <p-button pTooltip="Open Google Maps directions" icon="pi pi-car" (click)="tripToNavigation()" text />
           <p-button pTooltip="Show itinerary on map" icon="pi pi-directions"
             [severity]="tripMapAntLayerDayID == -1 ? 'help' : 'primary'" (click)="toggleTripDaysHighlight()" text />
+          <div class="border-l border-solid border-gray-700 h-4"></div>
           <p-button pTooltip="Print Trip" icon="pi pi-print" (click)="printTable()" text />
           <div class="border-l border-solid border-gray-700 h-4"></div>
         </div>
@@ -93,9 +95,9 @@
 
     @defer {
     @if (flattenedTripItems.length) {
-    <p-table [value]="flattenedTripItems" class="print-striped-rows" styleClass="max-w-[85vw] md:max-w-full"
-      [rowGroupMode]="tableExpandableMode ? 'subheader': 'rowspan'" groupRowsBy="td_label"
-      [resizableColumns]="tableExpandableMode">
+    <p-table [value]="flattenedTripItems" class="print-striped-rows" [class.table-colored-resizer]="tableExpandableMode"
+      styleClass="max-w-[85vw] md:max-w-full" [rowGroupMode]="tableExpandableMode ? 'subheader': 'rowspan'"
+      groupRowsBy="td_label" [resizableColumns]="tableExpandableMode">
       <ng-template #header>
         <tr>
           @if (!tableExpandableMode && tripTableSelectedColumns.includes('day')) {<th class="w-24" pResizableColumn>Day
diff --git a/src/src/styles.scss b/src/src/styles.scss
index 62a859e..1e2570c 100644
--- a/src/src/styles.scss
+++ b/src/src/styles.scss
@@ -126,6 +126,11 @@ html {
   }
 }
 
+.table-colored-resizer .p-datatable-column-resizer {
+  width: 2px;
+  background-color: #999;
+}
+
 @keyframes slideYcenteredX {
   0% {
     opacity: 0;