@things-factory/figure-ui 10.1.272 → 10.1.273

package/client/modeller/figure-fasten-drawing.ts

@@ -73,22 +73,28 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     svg text {
       font: inherit;
     }
+    /*
+      The ways on one line, a small side view beside each word: three cards of a drawing over a word made the window
+      tall, and the fasten button below went off a laptop's screen (user 2026-11-12). The chosen one's gap is dragged
+      on its small view still; the gap's field is in the details.
+    */
     div[modes] {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
-      gap: 6px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
     }
     div[modes] svg {
-      width: 48px;
-      height: 33px;
+      flex: none;
+      width: 28px;
+      height: 20px;
     }
     /* A choice drawn, not a box to press (the side's rule: no boxed buttons): the chosen one on the primary's ground. */
     div[modes] button {
-      display: grid;
-      justify-items: center;
-      align-content: center;
-      gap: 2px;
-      padding: 4px 4px 6px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px 2px 4px;
+      white-space: nowrap;
       font: inherit;
       color: var(--md-sys-color-on-surface);
       background: none;
@@ -123,8 +129,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
       border: 1px solid var(--md-sys-color-primary);
     }
     div[modes] button[on] {
-      background: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
+      background: var(--md-sys-color-primary-container, #d8e2ff);
+      color: var(--md-sys-color-on-primary-container, #001a41);
     }
     /* The box and the face seen from above side by side, one under the other where the window is narrow. */
     div[face-row] {
@@ -333,7 +339,9 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     const { h, v, sign } = screenOf(view.axes)
     const W = WHERE_W,
       H = WHERE_H
-    const span = (a: Axis) => drawingSpanOf(view.face[a], view.part[a])
+    /* Where the part is set, not where it is being dragged: the drawing's scale holds still under the pointer. */
+    const set = (a: Axis) => offsetOf(this.align[a], this.alignMm[a], view.face[a], view.part[a])
+    const span = (a: Axis) => drawingSpanOf(view.face[a], view.part[a], set(a))
     const k = Math.min((W - 40) / span(h), (H - 40) / span(v))
     this.scale = k
     const cx = W / 2,

package/client/modeller/figure-links.ts

@@ -95,6 +95,17 @@ const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as Figu
 export class FigureLinks extends localize(i18next)(LitElement) {
   private readonly help = new HelpToggles(this)
   static styles = [SidePanelStyles, GroupMenuStyles, css`
+    /* A motion's delete and edit as icons at the line's end, their words in their titles: two word buttons took the line (user 2026-11-12). */
+    div[pair] > button[act][icon] {
+      flex: none;
+      width: var(--figure-control-height, 28px);
+      padding: 0;
+      justify-content: center;
+    }
+    /* The size-by-state form folded under its summary, opened to add one. */
+    details[state-size-add][open] > summary {
+      margin-bottom: 6px;
+    }
     :host {
       display: block;
     }
@@ -673,7 +684,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         : { ...form, id: value }
     }
     const number = (key: 'min' | 'max' | 'atMin' | 'atMax') => (e: Event) => (this.stateSize = { ...form, axis, [key]: (e.target as HTMLInputElement).valueAsNumber })
-    return html`<h4 state-size>${i18next.t('figure.label.state-size')}</h4>
+    return html`${sized.length ? html`<h4 state-size>${i18next.t('figure.label.state-size')}</h4>` : nothing}
       ${sized.map(({ axis: one, f }) => {
         const k = measureFactor(asset, part, one)
         const input = controls.find(c => c.id === f.input)
@@ -695,7 +706,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         </div>`
       })}
       ${free.length
-        ? html`<div form state-size-form>
+        ? /* Folded until asked for: six lines of a form few parts use pushed the controls below it down (user 2026-11-12). */
+          html`<details state-size-add>
+          <summary>${i18next.t('figure.button.add-state-size')}</summary>
+          <div form state-size-form>
             <span>${i18next.t('figure.label.state-size-measure')}</span>
             <select ?disabled=${this.locked} @change=${(e: Event) => (this.stateSize = { ...form, axis: (e.target as HTMLSelectElement).value as Axis, atMax: NaN })}>
               ${free.map(one => html`<option value=${one} ?selected=${one === axis}>${word(one)}</option>`)}
@@ -724,7 +738,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             if (!command) return
             this.command(command)
             this.stateSize = freshStateSize()
-          }}><md-icon>open_in_full</md-icon>${i18next.t('figure.button.add-state-size')}</button>`
+          }}><md-icon>add</md-icon>${i18next.t('figure.button.add')}</button>
+        </details>`
         : nothing}`
   }
 
@@ -850,14 +865,14 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                 : nothing}
           </span>
           ${count > 1
-            ? html`<button act remove-axis ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: withoutAxis(joint, k) })}>
-                <md-icon>close</md-icon>${i18next.t('figure.button.remove-axis')}
+            ? html`<button act icon remove-axis title=${i18next.t('figure.button.remove-axis')} aria-label=${i18next.t('figure.button.remove-axis')} ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: withoutAxis(joint, k) })}>
+                <md-icon>delete</md-icon>
               </button>`
-            : html`<button act ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: fixedJointOf(joint) })}>
-                <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
+            : html`<button act icon title=${i18next.t('figure.button.remove-motion')} aria-label=${i18next.t('figure.button.remove-motion')} ?disabled=${this.locked || !joint} @click=${() => joint && this.command({ kind: 'set-joint', joint: fixedJointOf(joint) })}>
+                <md-icon>delete</md-icon>
               </button>`}
-          <button act ?disabled=${this.locked || !joint} @click=${() => edit(k)}>
-            <md-icon>edit</md-icon>${i18next.t('figure.button.change-motion')}
+          <button act icon title=${i18next.t('figure.button.change-motion')} aria-label=${i18next.t('figure.button.change-motion')} ?disabled=${this.locked || !joint} @click=${() => edit(k)}>
+            <md-icon>edit</md-icon>
           </button>
         </div>`
       }

package/client/modeller/figure-parts.ts

@@ -444,9 +444,10 @@ export class FigureParts extends localize(i18next)(LitElement) {
       li[selected] div[ops] {
         display: flex;
       }
+      /* As tall as the eye beside the name: a chosen row is no taller than the others. */
       div[ops] button {
         display: flex;
-        padding: 2px;
+        padding: 1px;
         color: inherit;
         background: none;
         border: none;
@@ -465,17 +466,12 @@ export class FigureParts extends localize(i18next)(LitElement) {
         color: inherit;
       }
       /*
-        Under 200 px the selected row's four buttons pushed its name out and the last one past the edge (seen at 140,
-        2026-09-24). They go to a line of their own under the name.
+        The chosen row keeps the height of the others, however narrow the list: its buttons stay beside the name, which is
+        cut short (its whole name is in the title and the panel's head). Going to a line of their own under 200 px
+        (2026-09-24), they pushed every row under it down as a part was chosen (user 2026-11-12).
       */
-      @container (max-width: 199px) {
-        li[selected] {
-          flex-wrap: wrap;
-        }
-        li[selected] div[ops] {
-          flex-basis: 100%;
-          justify-content: flex-end;
-        }
+      div[ops] {
+        flex: none;
       }
       p[quiet] {
         margin: 0;