Ui fixes

Author: mayagbarnes

streamlit_pivot/frontend/src/config/DndFieldChip.tsx

@@ -200,3 +200,115 @@ export const DragOverlayChip: FC<FieldChipProps> = (props): ReactElement => {
     </span>
   );
 };
+
+// ---------------------------------------------------------------------------
+// Synthetic (fx) measure chip — sortable within the Values zone.
+// ---------------------------------------------------------------------------
+
+export interface SyntheticChipDisplayProps {
+  syntheticId: string;
+  label: string;
+  testId: string;
+  disabled?: boolean;
+  onRemove?: (syntheticId: string) => void;
+  showDragHandle?: boolean;
+}
+
+function SyntheticChipContent({
+  syntheticId,
+  label,
+  testId,
+  disabled,
+  onRemove,
+  showDragHandle,
+}: SyntheticChipDisplayProps): ReactElement {
+  return (
+    <>
+      {showDragHandle && <GripDotsIcon />}
+      <span className={styles.aggChipIcon}>fx</span>
+      <span
+        className={styles.chipLabelText}
+        data-testid={`${testId}-synthetic-label-${syntheticId}`}
+      >
+        <span className={styles.chipPrimaryText}>{label}</span>
+      </span>
+      {!disabled && onRemove && (
+        <button
+          type="button"
+          className={styles.chipRemove}
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove(syntheticId);
+          }}
+          aria-label={`Remove ${label}`}
+          data-testid={`${testId}-synthetic-remove-${syntheticId}`}
+        >
+          ×
+        </button>
+      )}
+    </>
+  );
+}
+
+export interface SortableSyntheticChipProps extends SyntheticChipDisplayProps {
+  id: string;
+}
+
+export const SortableSyntheticChip: FC<SortableSyntheticChipProps> = ({
+  id,
+  syntheticId,
+  label,
+  testId,
+  disabled,
+  onRemove,
+}): ReactElement => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id,
+    disabled,
+    data: { type: "synthetic", syntheticId },
+  });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.3 : undefined,
+  };
+
+  return (
+    <span
+      ref={setNodeRef}
+      className={`${styles.chip} ${isDragging ? styles.chipDragging : ""}`}
+      style={style}
+      {...attributes}
+      {...(disabled ? {} : listeners)}
+      data-testid={`${testId}-synthetic-${syntheticId}`}
+    >
+      <SyntheticChipContent
+        syntheticId={syntheticId}
+        label={label}
+        testId={testId}
+        disabled={disabled}
+        onRemove={onRemove}
+        showDragHandle={!disabled}
+      />
+    </span>
+  );
+};
+
+export const SyntheticDragOverlayChip: FC<SyntheticChipDisplayProps> = (
+  props,
+): ReactElement => {
+  return (
+    <span className={`${styles.chip} ${styles.chipOverlay}`}>
+      <SyntheticChipContent {...props} showDragHandle={true} />
+    </span>
+  );
+};

streamlit_pivot/frontend/src/config/SettingsPanel.module.css

@@ -128,6 +128,7 @@
   box-sizing: border-box;
   max-height: 70px;
   overflow-y: auto;
+  flex-shrink: 0;
 }
 
 .availableChip {
@@ -232,6 +233,7 @@
   overflow-y: auto;
   scrollbar-gutter: stable;
   transition: border-color 0.15s, background 0.15s;
+  flex-shrink: 0;
 }
 
 .zoneAreaActive {
@@ -510,14 +512,23 @@
   align-items: center;
   gap: 3px;
   flex-shrink: 0;
-  padding: 2px 6px;
+  padding: 3px 7px 3px 9px;
+  height: 24px;
+  box-sizing: border-box;
   border: 1px solid color-mix(in srgb, var(--st-primary-color) 30%, transparent);
   border-radius: 12px;
   background: color-mix(in srgb, var(--st-primary-color) 5%, transparent);
   color: var(--st-text-color);
   font-family: var(--st-font);
   font-size: 0.75em;
   white-space: nowrap;
+  position: relative;
+  user-select: none;
+  cursor: grab;
+}
+
+.syntheticChip:active {
+  cursor: grabbing;
 }
 
 .syntheticIcon {
@@ -559,6 +570,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
+  flex-shrink: 0;
 }
 
 .builderField {