kupos-ui-components-lib 10.4.49 → 10.4.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/styles.css +3 -8
  2. package/dist/ui/DurationBlock.js +1 -1
  3. package/dist/ui/OfferBanner.js +1 -1
  4. package/dist/ui/mobileweb/DateTimeSectionMobile.js +13 -9
  5. package/dist/ui/mobileweb/SeatSectionMobile.js +23 -9
  6. package/package.json +1 -1
  7. package/src/ui/DurationBlock.tsx +1 -1
  8. package/src/ui/OfferBanner.tsx +1 -1
  9. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +24 -10
  10. package/src/ui/mobileweb/SeatSectionMobile.tsx +35 -9
package/dist/styles.css CHANGED
@@ -57,6 +57,9 @@
57
57
  .top-\[25px\] {
58
58
  top: 25px;
59
59
  }
60
+ .top-\[29px\] {
61
+ top: 29px;
62
+ }
60
63
  .top-\[30px\] {
61
64
  top: 30px;
62
65
  }
@@ -135,9 +138,6 @@
135
138
  .left-\[31px\] {
136
139
  left: 31px;
137
140
  }
138
- .left-\[50\%\] {
139
- left: 50%;
140
- }
141
141
  .-z-9 {
142
142
  z-index: calc(9 * -1);
143
143
  }
@@ -1609,11 +1609,6 @@
1609
1609
  }
1610
1610
  }
1611
1611
  }
1612
- .max-\[399px\]\:left-\[53\%\] {
1613
- @media (width < 399px) {
1614
- left: 53%;
1615
- }
1616
- }
1617
1612
  .min-\[420\]\:text-\[12px\] {
1618
1613
  @media (width >= 420) {
1619
1614
  font-size: 12px;
package/dist/ui/DurationBlock.js CHANGED
@@ -7,7 +7,7 @@ const DurationBlock = ({ serviceItem, translation, renderIcon, isSoldOut, colors
7
7
  DateService.formatDuration(serviceItem.duration),
8
8
  " ",
9
9
  translation.hours),
10
- React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },
10
+ React.createElement("div", { className: "hidden group-hover:block absolute top-[29px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },
11
11
  React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.bottomStripColor } }),
12
12
  "Duraci\u00F3n estimada del viaje"))));
13
13
  export default DurationBlock;
package/dist/ui/OfferBanner.js CHANGED
@@ -84,7 +84,7 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
84
84
  }
85
85
  return null;
86
86
  };
87
- return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[9px]`, style: {
87
+ return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[40px]" : isExpand ? "-bottom-[40px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[9px]`, style: {
88
88
  background: (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
89
89
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
90
90
  ? offerGradient
package/dist/ui/mobileweb/DateTimeSectionMobile.js CHANGED
@@ -23,19 +23,20 @@ const getCleanedDepTime = (raw) => {
23
23
  };
24
24
  const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
25
25
  const formattedDate = DateService.getServiceItemDate(date);
26
- const dotPositionClass = formattedDate.includes("dom")
27
- ? "max-[399px]:left-[53%]"
28
- : "";
29
- return (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
26
+ return (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}`,
27
+ // Scale down on narrow phones (<~380px) so date + time fit beside the
28
+ // fares; 20px line height matches the Antes/Desde rows so they line up
29
+ style: { fontSize: "min(13px, 3.4vw)", lineHeight: "20px" } },
30
30
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
31
31
  React.createElement("div", null,
32
32
  " ",
33
33
  label ? (React.createElement("div", { className: "w-[60px]" }, label)) : (React.createElement("div", { className: "w-[12px] h-auto mr-[5px]" },
34
34
  React.createElement("img", { src: icon, alt: alt, className: `w-[12px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
35
- React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
35
+ React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1, gap: "6px" } },
36
36
  React.createElement("span", { className: "cursor-pointer black-text whitespace-nowrap" }, formattedDate),
37
- React.createElement("div", { className: `absolute left-[50%] ${dotPositionClass}` }, "\u2022"),
38
- React.createElement("div", { className: "font-[900] relative black-text whitespace-nowrap" }, timeContent)))));
37
+ React.createElement("div", { className: "flex items-center whitespace-nowrap", style: { gap: "6px", minWidth: "5.6em" } },
38
+ React.createElement("div", null, "\u2022"),
39
+ React.createElement("div", { className: "font-[900] relative black-text", style: { fontVariantNumeric: "tabular-nums" } }, timeContent))))));
39
40
  };
40
41
  function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
41
42
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
@@ -49,7 +50,9 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
49
50
  ? null
50
51
  : DateService.ampmOnly(depTime)))) : (DateService.formatTime(depTime));
51
52
  return (React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
52
- React.createElement("div", { className: `flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`, style: {
53
+ React.createElement("div", { className: `flex flex-col gap-[4px] ${isTrain ? "justify-center" : "justify-between"}`, style: {
54
+ flex: 1,
55
+ minWidth: 0,
53
56
  justifyContent: isCiva && "center",
54
57
  minHeight: isTrain ? undefined : "2.5rem",
55
58
  alignSelf: isTrain ? "stretch" : undefined,
@@ -60,7 +63,8 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
60
63
  width: "1px",
61
64
  height: "2.5rem",
62
65
  backgroundColor: "#ccc",
63
- margin: "auto",
66
+ margin: "auto 6px",
67
+ flexShrink: 0,
64
68
  } }),
65
69
  React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: discountSeatCrossPriceColor })));
66
70
  }
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -45,7 +45,7 @@ const getUniqueSeats = (data, limit) => {
45
45
  });
46
46
  return Array.from(seatMap.values())
47
47
  .sort((a, b) => a.fare - b.fare)
48
- .slice(2, limit);
48
+ .slice(0, limit);
49
49
  };
50
50
  function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
51
51
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -221,9 +221,18 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
221
221
  originalDpPrice != null &&
222
222
  dpDiscountPercent != null &&
223
223
  firstSeatFare != null;
224
- return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
224
+ return (React.createElement("div", { className: "content-center relative", style: { width: "40%", flexShrink: 0 } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
225
225
  !((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _j === void 0 ? void 0 : _j.length) &&
226
- !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
226
+ !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (
227
+ // Antes/Desde rows spread top/bottom so they line up with the
228
+ // departure/arrival rows beside them
229
+ React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ", style: {
230
+ height: "100%",
231
+ alignContent: !isNaN(Number(dpDiscountPercent)) &&
232
+ Number(dpDiscountPercent) > 0
233
+ ? "space-between"
234
+ : "center",
235
+ } },
227
236
  !isNaN(Number(dpDiscountPercent)) &&
228
237
  Number(dpDiscountPercent) > 0 && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
229
238
  animation: "pulse-zoom 2s ease-in-out infinite",
@@ -250,16 +259,21 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
250
259
  transform: "rotate(-12deg)",
251
260
  transformOrigin: "center",
252
261
  } })),
253
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
254
- React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
262
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
263
+ React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[20px]", style: {
255
264
  color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
256
265
  } },
257
266
  ((_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _k === void 0 ? void 0 : _k.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
258
267
  commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
259
268
  isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : // Peru Tier B (ui_type 1) falls through to the regular layout — same
260
269
  // colours and "Desde" as a service with no discount, original fare.
261
- hasDiscount && discountSeat && !(isPeru && isOfferTextOnlyTier) ? (React.createElement("div", null,
262
- React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
270
+ hasDiscount && discountSeat && !(isPeru && isOfferTextOnlyTier) ? (React.createElement("div", { style: { height: "100%" } },
271
+ React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ", style: {
272
+ height: "100%",
273
+ alignContent: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && discountBadgeText
274
+ ? "space-between"
275
+ : "center",
276
+ } },
263
277
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && discountBadgeText && (React.createElement(React.Fragment, null,
264
278
  React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
265
279
  animation: "pulse-zoom 2s ease-in-out infinite",
@@ -286,10 +300,10 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
286
300
  transform: "rotate(-12deg)",
287
301
  transformOrigin: "center",
288
302
  } })))),
289
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, isOfferTextOnlyTier
303
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, isOfferTextOnlyTier
290
304
  ? commonService.capitalize(commonService.truncateSeatLabel(discountSeat.label))
291
305
  : "Desde"),
292
- React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
306
+ React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[20px]", style: {
293
307
  color: isSoldOut
294
308
  ? "#bbb"
295
309
  : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.49",
3
+ "version": "10.4.51",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/DurationBlock.tsx CHANGED
@@ -21,7 +21,7 @@ const DurationBlock = ({
21
21
  {DateService.formatDuration(serviceItem.duration)} {translation.hours}
22
22
  </span>
23
23
  <div
24
- className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"
24
+ className="hidden group-hover:block absolute top-[29px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"
25
25
  style={{ backgroundColor: colors.bottomStripColor }}
26
26
  >
27
27
  {/* Tooltip arrow */}
package/src/ui/OfferBanner.tsx CHANGED
@@ -288,7 +288,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
288
288
 
289
289
  return (
290
290
  <div
291
- className={`text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[9px]`}
291
+ className={`text-white w-full absolute ${coachKey ? "-bottom-[40px]" : isExpand ? "-bottom-[40px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[9px]`}
292
292
  style={{
293
293
  background:
294
294
  (isNewUiEnabled && serviceItem?.ui_type === 2) ||
package/src/ui/mobileweb/DateTimeSectionMobile.tsx CHANGED
@@ -69,14 +69,14 @@ const TimeRow: React.FC<TimeRowProps> = ({
69
69
  isSoldOut,
70
70
  }) => {
71
71
  const formattedDate = DateService.getServiceItemDate(date);
72
- const dotPositionClass = formattedDate.includes("dom")
73
- ? "max-[399px]:left-[53%]"
74
- : "";
75
72
  return (
76
73
  <div
77
74
  className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
78
75
  isSoldOut ? "text-[#c0c0c0]" : ""
79
76
  }`}
77
+ // Scale down on narrow phones (<~380px) so date + time fit beside the
78
+ // fares; 20px line height matches the Antes/Desde rows so they line up
79
+ style={{ fontSize: "min(13px, 3.4vw)", lineHeight: "20px" }}
80
80
  >
81
81
  <div className="flex items-center" style={{ flex: 1 }}>
82
82
  <div>
@@ -97,14 +97,24 @@ const TimeRow: React.FC<TimeRowProps> = ({
97
97
  </div>
98
98
  <div
99
99
  className="flex items-center relative capitalize justify-between"
100
- style={{ flex: 1 }}
100
+ style={{ flex: 1, gap: "6px" }}
101
101
  >
102
102
  <span className="cursor-pointer black-text whitespace-nowrap">
103
103
  {formattedDate}
104
104
  </span>
105
- <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
106
- <div className="font-[900] relative black-text whitespace-nowrap">
107
- {timeContent}
105
+ {/* Dot + time in a fixed-width, left-aligned box so both rows'
106
+ times line up regardless of date/time text width */}
107
+ <div
108
+ className="flex items-center whitespace-nowrap"
109
+ style={{ gap: "6px", minWidth: "5.6em" }}
110
+ >
111
+ <div>•</div>
112
+ <div
113
+ className="font-[900] relative black-text"
114
+ style={{ fontVariantNumeric: "tabular-nums" }}
115
+ >
116
+ {timeContent}
117
+ </div>
108
118
  </div>
109
119
  </div>
110
120
  </div>
@@ -161,10 +171,13 @@ function DateTimeSectionMobile({
161
171
  className="flex justify-between gap-[5px] w-full"
162
172
  onClick={onBookButtonPress}
163
173
  >
164
- {/* DATE AND TIME */}
174
+ {/* DATE AND TIME — takes whatever the seat column (40%) leaves, so
175
+ long date/time strings don't spill over the divider */}
165
176
  <div
166
- className={`flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`}
177
+ className={`flex flex-col gap-[4px] ${isTrain ? "justify-center" : "justify-between"}`}
167
178
  style={{
179
+ flex: 1,
180
+ minWidth: 0,
168
181
  justifyContent: isCiva && "center",
169
182
  minHeight: isTrain ? undefined : "2.5rem",
170
183
  alignSelf: isTrain ? "stretch" : undefined,
@@ -195,7 +208,8 @@ function DateTimeSectionMobile({
195
208
  width: "1px",
196
209
  height: "2.5rem",
197
210
  backgroundColor: "#ccc",
198
- margin: "auto",
211
+ margin: "auto 6px",
212
+ flexShrink: 0,
199
213
  }}
200
214
  ></div>
201
215
 
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -119,7 +119,7 @@ const getUniqueSeats = (data: SeatType[], limit: number): SeatType[] => {
119
119
 
120
120
  return Array.from(seatMap.values())
121
121
  .sort((a, b) => a.fare - b.fare)
122
- .slice(2, limit);
122
+ .slice(0, limit);
123
123
  };
124
124
 
125
125
  function SeatSectionMobile({
@@ -521,7 +521,10 @@ function SeatSectionMobile({
521
521
  firstSeatFare != null;
522
522
 
523
523
  return (
524
- <div className="content-center relative" style={{ width: "40%" }}>
524
+ <div
525
+ className="content-center relative"
526
+ style={{ width: "40%", flexShrink: 0 }}
527
+ >
525
528
  {serviceItem?.is_dp_enabled &&
526
529
  !serviceItem?.dp_discounted_seats?.length &&
527
530
  !dpDiscountPercent ? (
@@ -532,7 +535,19 @@ function SeatSectionMobile({
532
535
  {renderDpSeats()}
533
536
  </div>
534
537
  ) : hasDpDiscount ? (
535
- <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
538
+ // Antes/Desde rows spread top/bottom so they line up with the
539
+ // departure/arrival rows beside them
540
+ <div
541
+ className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] "
542
+ style={{
543
+ height: "100%",
544
+ alignContent:
545
+ !isNaN(Number(dpDiscountPercent)) &&
546
+ Number(dpDiscountPercent) > 0
547
+ ? "space-between"
548
+ : "center",
549
+ }}
550
+ >
536
551
  {!isNaN(Number(dpDiscountPercent)) &&
537
552
  Number(dpDiscountPercent) > 0 && (
538
553
  <div
@@ -579,13 +594,13 @@ function SeatSectionMobile({
579
594
  </span>
580
595
 
581
596
  <span
582
- className="min-[420]:text-[13px] text-[12px] leading-[24px]"
597
+ className="min-[420]:text-[13px] text-[12px] leading-[20px]"
583
598
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
584
599
  >
585
600
  Desde
586
601
  </span>
587
602
  <span
588
- className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
603
+ className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[20px]"
589
604
  style={{
590
605
  color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
591
606
  }}
@@ -613,8 +628,19 @@ function SeatSectionMobile({
613
628
  ) : // Peru Tier B (ui_type 1) falls through to the regular layout — same
614
629
  // colours and "Desde" as a service with no discount, original fare.
615
630
  hasDiscount && discountSeat && !(isPeru && isOfferTextOnlyTier) ? (
616
- <div>
617
- <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
631
+ <div style={{ height: "100%" }}>
632
+ {/* Antes/Desde rows spread top/bottom so they line up with the
633
+ departure/arrival rows beside them */}
634
+ <div
635
+ className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] "
636
+ style={{
637
+ height: "100%",
638
+ alignContent:
639
+ serviceItem?.ui_type !== 1 && discountBadgeText
640
+ ? "space-between"
641
+ : "center",
642
+ }}
643
+ >
618
644
  {serviceItem?.ui_type !== 1 && discountBadgeText && (
619
645
  <>
620
646
  <div
@@ -667,7 +693,7 @@ function SeatSectionMobile({
667
693
  )}
668
694
 
669
695
  <span
670
- className="min-[420]:text-[13px] text-[12px] leading-[24px]"
696
+ className="min-[420]:text-[13px] text-[12px] leading-[20px]"
671
697
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
672
698
  >
673
699
  {isOfferTextOnlyTier
@@ -677,7 +703,7 @@ function SeatSectionMobile({
677
703
  : "Desde"}
678
704
  </span>
679
705
  <span
680
- className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
706
+ className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[20px]"
681
707
  style={{
682
708
  color: isSoldOut
683
709
  ? "#bbb"