Component

LayoutReferendum

It submits the children to a tiny layout referendum: double-click one of three genuinely different arrangements, and the chosen disposition becomes persistent until the ballot is reopened.

Possible use

It could be used to let a reviewer choose whether a small set of fields should become a stack, read backwards, or split into a two-column committee before a handoff.

Reasonable alternative

A reasonable local alternative is one layout class and an ordinary select or button group. Publishing a binding referendum for a few fields remains difficult to defend when CSS already knows how to arrange them.

01 / Preview

Try it yourself.

Title

Status

Owner

Date

Choose a binding arrangement

Double-click a proposal to make the layout legally worse.

Double-click a proposal. The chosen arrangement becomes binding until you reopen the ballot.

Mechanism

1: Start with four fields in their ordinary row.
2: Double-click one of the three genuinely different proposals.
3: The fields become a stack, a backwards row, or a split committee.
4: Reopen the ballot to restore the original arrangement.

02 / Usage

Put it somewhere.

example.tsxTSX

import { LayoutReferendum } from "gra-ui";
import "gra-ui/styles.css";

export function RefiledFields() {
  return (
    <LayoutReferendum>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </LayoutReferendum>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content reorganized by the chosen arrangement.