Words in Markdown and Textarea preview gets wrapped, even on large screens

[sewid]

• Laravel Version: 9.38.0
• Nova Version: 4.18.2
• PHP Version: 8.1.11
• Database Driver & Version: mySQL
• Operating System and Version: macOS Ventura
• Browser type and version: Safari & Chrome

Description:

When I add a textarea or a markdown field, the details page wraps the words, even on large screens, see:

Detailed steps to reproduce the issue on a fresh Nova installation:

Add a textarea or a markdown field to a resource and open the details page. The containing div has these tailwind classes:
md:w-3/4 md:py-3 break-all lg:break-words

I think, it should be
md:w-3/4 md:py-3 break-all lg:break-normal lg:break-words

[sewid]

Why has this been converted to a discussion? It is a bug, isn't it? A textarea field cannot be displayed correctly - there is no way.

[sewid]

Anyone with an idea? Has anyone a detail page with a working textarea or markdown field without wrapped words?

[kichetof]

+1

fullWidth helper doesn't solve it, unfortunately

[kichetof]

break-words solved in 4.19.6 but the field doesn't use whole screen.
CSS prose is set to max 65ch:

.prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
}

Removing it and the field will be responsive

[LorenzoSapora]

@crynobone This seems to have slipped through the cracks

[kichetof]

My workaround:

artisan nova:asset me/markdown-fix-width

Edit nova-components/MarkdownFixWidth/resources/css/asset.css like that:

/* Nova Asset CSS */
.prose {
    max-width: 100% !important;
}

and compile assets! Voila!