From 50098fb5e9eb00a581fed3447a6ff26d69237142 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 15 Jul 2023 13:26:58 +0200
Subject: [PATCH] Set input and textarea to display block (#1938)

## Description

Browser default is inline, but with most certainty this is not practical

PR is on top of
https://github.com/webstudio-is/webstudio-builder/pull/1937

## Steps for reproduction

1. add input, textarea
2. see they are rendered as display block on its own row

## Code Review

- [ ] hi @TrySound , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

---------

Co-authored-by: istarkov <istarkov@gmail.com>
Co-authored-by: Bogdan Chadkin <trysound@yandex.ru>
---
 packages/sdk-components-react/src/input.ws.tsx    | 8 +++++++-
 packages/sdk-components-react/src/textarea.ws.tsx | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/sdk-components-react/src/input.ws.tsx b/packages/sdk-components-react/src/input.ws.tsx
index 6c76802004..236fd53a3b 100644
--- a/packages/sdk-components-react/src/input.ws.tsx
+++ b/packages/sdk-components-react/src/input.ws.tsx
@@ -10,7 +10,13 @@ import type { defaultTag } from "./input";
 import { props } from "./__generated__/input.props";
 
 const presetStyle = {
-  input,
+  input: [
+    ...input,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" },
+    },
+  ],
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
diff --git a/packages/sdk-components-react/src/textarea.ws.tsx b/packages/sdk-components-react/src/textarea.ws.tsx
index cd340a3a3d..7b7aeb8921 100644
--- a/packages/sdk-components-react/src/textarea.ws.tsx
+++ b/packages/sdk-components-react/src/textarea.ws.tsx
@@ -14,6 +14,10 @@ const presetStyle = {
     ...textarea,
     // resize doesn't work well while on canvas
     { property: "resize", value: { type: "keyword", value: "none" } },
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" },
+    },
   ],
 } satisfies PresetStyle<typeof defaultTag>;