@lavalogic/scoria 0.37.17 → 0.37.18

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -727,6 +727,8 @@ div.input-cell {
   overflow: visible;
   padding-left: 0;
   padding-right: 0;
+  border-right: solid 1px #cbd4da !important;
+  box-sizing: border-box;
 }
 div.input-cell div.stick-right {
   position: absolute;

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -368,59 +368,71 @@
 		ondragleave={disableDragVisual}
 		ondrop={disableDragVisual}
 	>
-		<div class="visibility-wrapper">
-			<Checkbox
-				icon={{ name: 'assessment', size: Size.Medium }}
-				size={Size.FillWidth}
-				id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnVisibility[columnDef.id] !== false}
-				onchange={onVisibilityChange}
-			/>
-		</div>
-
-		{#if tableContext.allowColumnReordering}
-			<!--
-				Tri-state pin selector rendered via `ThreeStateRadio`,
-				matching the visual segmented-control used elsewhere in
-				the table (filter Active state, etc.). The three
-				`Ternary` slots map to:
-				  False   → pinned LEFT  (pin-left icon, leftmost)
-				  Neutral → unpinned     (circle-cross icon, middle)
-				  True    → pinned RIGHT (pin-right icon, rightmost)
-				Expand columns can never be pinned, so the group goes
-				fully disabled for them.
-			-->
-			<div
-				class="pin-selector"
-				class:disabled={isExpandColumn}
+		<!--
+			`.row-main` stacks the column label on top and the
+			visibility / pin controls underneath, so the label gets
+			the full card width to wrap into (instead of competing
+			horizontally with the controls). `.reorder-buttons` stays
+			as a sibling outside `.row-main` so the up / down arrows
+			remain vertically centred on the right edge of the card.
+		-->
+		<div class="row-main">
+			<span
+				class="column-label"
+				title={typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
 			>
-				<ThreeStateRadio
-					value={pinSide}
-					disabled={isExpandColumn}
-					noLabel="Pin to left"
-					neutralLabel="Unpinned"
-					yesLabel="Pin to right"
-					noIcon={{ name: 'pin-left', size: Size.Medium }}
-					neutralIcon={{ name: 'circle-cross', size: Size.Medium }}
-					yesIcon={{ name: 'pin-right', size: Size.Medium }}
-					onchange={(next: Ternary) => {
-						setPin(next);
-					}}
-				/>
+				{#if typeof columnDef.header === 'function'}
+					<!-- FIXME this needs testing -->
+					{@render columnDef.header()}
+				{:else}
+					{columnDef.header}
+				{/if}
+			</span>
+
+			<div class="row-controls">
+				<div class="visibility-wrapper">
+					<Checkbox
+						icon={{ name: 'assessment', size: Size.MediumSmall }}
+						size={Size.FillWidth}
+						id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
+						value={tableContext.columnVisibility[columnDef.id] !== false}
+						onchange={onVisibilityChange}
+					/>
+				</div>
+
+				{#if tableContext.allowColumnReordering}
+					<!--
+						Tri-state pin selector rendered via `ThreeStateRadio`,
+						matching the visual segmented-control used elsewhere in
+						the table (filter Active state, etc.). The three
+						`Ternary` slots map to:
+						  False   → pinned LEFT  (pin-left icon, leftmost)
+						  Neutral → unpinned     (circle-cross icon, middle)
+						  True    → pinned RIGHT (pin-right icon, rightmost)
+						Expand columns can never be pinned, so the group goes
+						fully disabled for them.
+					-->
+					<div
+						class="pin-selector"
+						class:disabled={isExpandColumn}
+					>
+						<ThreeStateRadio
+							value={pinSide}
+							disabled={isExpandColumn}
+							noLabel="Pin to left"
+							neutralLabel="Unpinned"
+							yesLabel="Pin to right"
+							noIcon={{ name: 'pin-left', size: Size.MediumSmall }}
+							neutralIcon={{ name: 'circle-cross', size: Size.MediumSmall }}
+							yesIcon={{ name: 'pin-right', size: Size.MediumSmall }}
+							onchange={(next: Ternary) => {
+								setPin(next);
+							}}
+						/>
+					</div>
+				{/if}
 			</div>
-		{/if}
-
-		<span
-			class="column-label"
-			title={typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
-		>
-			{#if typeof columnDef.header === 'function'}
-				<!-- FIXME this needs testing -->
-				{@render columnDef.header()}
-			{:else}
-				{columnDef.header}
-			{/if}
-		</span>
+		</div>
 
 		{#if tableContext.allowColumnReordering}
 			<!--
@@ -481,10 +493,11 @@ li.targeted {
 
 li.single-column:not(.anchor) {
   display: flex;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0.5rem;
+  flex-flow: row nowrap;
   align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  margin-bottom: 0.375rem;
   background-color: #ffffff;
   border: solid 1px #cbd4da;
   border-radius: 4px;
@@ -502,15 +515,30 @@ li.single-column:not(.anchor):last-of-type {
   margin-bottom: 0;
 }
 
+.row-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.375rem;
+}
+
+.row-controls {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .visibility-wrapper {
-  width: 3rem;
-  height: 3rem;
+  width: 2.25rem;
+  height: 2.25rem;
   display: flex;
   flex-shrink: 0;
 }
 
 .pin-selector {
-  --input-height: 3rem;
+  --input-height: 2.25rem;
   --input-width: auto;
   flex-shrink: 0;
   display: flex;
@@ -522,10 +550,12 @@ li.single-column:not(.anchor):last-of-type {
 }
 
 .column-label {
-  flex: 1 1 auto;
+  width: 100%;
   min-width: 0;
   font-size: 1.125rem;
-  line-height: 1.2;
+  font-weight: 500;
+  line-height: 1.25;
+  color: #3a4952;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte

@@ -188,6 +188,7 @@ div.bubble-parent {
   display: flex;
   flex-flow: row wrap;
   max-width: 100%;
+  height: 100%;
   overflow-x: clip;
   justify-content: flex-start;
   align-items: center;

package/dist/Components/Table/Table.svelte

@@ -156,10 +156,25 @@
 					`#${tableContext.tableName}-cell-${row}-${def.id}`
 				) as HTMLElement | undefined;
 
+				// Skip horizontal scroll-into-view for pinned (sticky)
+				// cells. Sticky positioning makes the cell visually
+				// "always on screen", but its true layout position is at
+				// its real column track - which for a right-pinned column
+				// in a wider-than-viewport table is offscreen. Asking the
+				// browser to `scrollIntoView({inline: 'nearest'})` then
+				// scrolls the table horizontally to bring the cell's
+				// underlying position into view, which is the user-facing
+				// "table jumps right when I click the Actions button"
+				// bug. The vertical block axis still scrolls because the
+				// row's vertical position is the user's actual scroll
+				// target.
+				const isPinned =
+					cell?.classList.contains('pinned-left') ||
+					cell?.classList.contains('pinned-right');
 				cell?.scrollIntoView({
 					behavior: 'instant',
 					block: 'nearest',
-					inline: 'nearest',
+					inline: isPinned ? undefined : 'nearest',
 				});
 			}
 		});

package/dist/scss/_mixins.scss

@@ -1869,6 +1869,17 @@
 		overflow: visible;
 		padding-left: 0;
 		padding-right: 0;
+		// Reassert the column-separator border-right here so it survives
+		// even when a narrow select-filter cell's internal widget (the
+		// SingleSelect / MultiSelect dropdown trigger) paints flush to
+		// the right edge. Without this rule, two adjacent select filters
+		// visually merge because the inner widget's background covers
+		// the cell's table-cell-basic border. `!important` is here to
+		// override the more-specific .focusable rule from
+		// table-cell-basic that occasionally re-paints the right edge
+		// transparent during focus.
+		border-right: solid 1px colours.$ui-blue-4 !important;
+		box-sizing: border-box;
 
 		div.stick-right {
 			position: absolute;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.17",
+  "version": "0.37.18",
   "publishConfig": {
     "access": "restricted"
   },