UI layout of fields in slices has reverted to an inline layout

[ReeceM]

Versions

• slice-machine-ui: 0.4.3
• node: v16.10
• chrome: 103.0.5060.134, firefox: 104 (20220818191623)

Additional Details

{
  "dependencies": {
    "@emotion/react": "^11.9.3",
    "@mdx-js/react": "^1",
    "@prismicio/client": "^6.6.1",
    "@prismicio/helpers": "^2.3.1",
    "@prismicio/next": "^0.1.3",
    "@prismicio/react": "^2.4.2",
    "next": "^12.2.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-inlinesvg": "^3.0.0",
    "rellax": "^1.12.1",
    "theme-ui": "^0.14.6",
    "wysiwyg.css": "^0.0.4"
  },
  "devDependencies": {
    "@headlessui/react": "^1.6.6",
    "@prismicio/slice-simulator-react": "^0.2.1",
    "@reecem/prismic-sitemap": "^0.4.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-require": "^3.1.3",
    "slice-machine-ui": "^0.4.2"
  }
}

Steps to reproduce

• Update to slicemachine 0.4.3
• Run the UI of slicemachine,
• create / edit a slice
• add a new field
• the layout is broken.

What is expected?

The previous versions had the layouts of the inputs stacked vertically, this was fine on narrower screens on laptops. But it now squishes it all into one. Not sure if it is only accommodating wide screen users? Or if it is a slight regression :)

What is actually happening?

I have attached a screenshot to show how it looks in both Firefox and Chrome. Firefox had no cache of any frontend assets, so it isn't a cache issue on there.

Having it like that really makes the layout look odd.

[angeloashmore]

Issue is confirmed. On resolutions smaller than 960px, the fields get squished and the content is truncated.

Proposed solution

• Group the input label and input into a single container.
• Stack the grouped label + input vertically on resolutions < 960px

[mdeclercq]

Hi,

We are currently working on the redesign of the field creation experience. We have a plan to address this issue in the following months. We'll close the issue once it is fixed.

[comeprismic]

Update. We made a hotfix on this to let fields stack vertically on smaller screen sizes. This solves the problem temporarily before we come up with our redesigned brand new field widget. I therefore close the issue now.