@lotics/ui 47.1.0 → 47.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.1.0",
+  "version": "47.1.1",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",

package/src/inline_edit.tsx

@@ -823,7 +823,11 @@ const styles = StyleSheet.create({
   // the row's own menu. With `marginLeft` alone the box grows leftward, its right
   // edge stays on the container, and `paddingRight` still holds the text off the
   // border.
-  viewBareBleed: { marginLeft: -8 },
+  // Stretches for the same reason `editRow` does — it is the outermost element
+  // when there are no verbs, so a right-aligned cell would size IT to content
+  // instead. The negative margin is the bare variant's deliberate 8px bleed, so
+  // the field reads 8px wider than its column by design.
+  viewBareBleed: { marginLeft: -8, alignSelf: "stretch", minWidth: 0 },
   // The shell's own inset: the right edge tightens to 4 so an `InlineButton` sits
   // on the surface's edge with the same air a `Chip`'s dismiss gets.
   shell: { paddingRight: 4 },
@@ -864,7 +868,13 @@ const styles = StyleSheet.create({
   // showed it — `Text` sets its own alignment — so the centring only surfaced
   // once `display` accepted a node and rendered prose that inherited it.
   viewNode: { flex: 1, minWidth: 0, textAlign: "left" },
-  editRow: { flexDirection: "row", alignItems: "flex-start", gap: 6 },
+  // `alignSelf: stretch` because an inline edit takes its width from the COLUMN
+  // it sits in, never from what it happens to contain. Without it a right-aligned
+  // cell (`alignItems: flex-end`) sizes this row to its content, and in edit mode
+  // the content is a native `<input>`, whose default `size=20` is ~236px it will
+  // not shrink below. In a 104px quantity column that overflowed 132px LEFTWARD —
+  // pinned to the cell's right edge, spilling across the column beside it.
+  editRow: { flexDirection: "row", alignItems: "flex-start", gap: 6, alignSelf: "stretch", minWidth: 0 },
   editControl: { flex: 1, position: "relative" },
   // The input brings its own 40px height, so the surface must not add its resting
   // vertical padding on top — that was a 12px jump the moment the field focused.

package/src/number_input.tsx

@@ -73,6 +73,13 @@ export function NumberInput(props: NumberInputProps) {
       autoFocus={autoFocus}
       style={{
         height: 40,
+        // A native input carries `size=20` — about 236px of intrinsic width it
+        // refuses to shrink below, because a flex item's `min-width` defaults to
+        // `auto`. In any column narrower than that the field overflowed rather
+        // than fitting. Width comes from the container; the input never states
+        // its own.
+        width: "100%",
+        minWidth: 0,
         paddingLeft: seamless ? 0 : 8,
         paddingRight: seamless ? 0 : 8,
         borderRadius: CONTROL_RADIUS,

package/src/text_input_field.tsx

@@ -291,6 +291,12 @@ const styles = StyleSheet.create({
     // overrides via `style` (it lands after this in the array).
     backgroundColor: colors.white,
     height: 40,
+    // Same reason `NumberInput` states it: a native input carries `size=20`,
+    // about 236px of intrinsic width, and a flex item's `min-width` defaults to
+    // `auto` — so in any column narrower than that the field overflows instead
+    // of fitting. Width comes from the container; the input never states its own.
+    width: "100%",
+    minWidth: 0,
     paddingVertical: INPUT_PADDING_Y,
     paddingHorizontal: 8,
     fontFamily: fontFamilyRegular,