Окно вывода с использованием переполнения не ведет себя должным образом в CSS попутного ветра ⇐ CSS

[Anonymous]

Я получил этот первоначальный дизайн в формате Raw, который выглядит следующим образом:


Он занимает всю ширину, как и предполагалось. Проблема в том, что когда у него есть контент, и он слишком длинный, он нарушает дизайн и становится слишком длинным:
[img]https:/ /i.sstatic.net/XIhC3qFc.png[/img]

Как видите, ширина слишком велика и портит дизайн. Переполнение необработанных выходных данных нарушает дизайн. Это мой код:
ОБНОВЛЕНИЕ: Это мой index.css:

Код: Выделить всё

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
/* UNI STYLE */
* {
@apply m-0 p-0;
}

html,
body,
#root {
@apply h-full;
}

/* TOP NAVIGATION */

.mobile-navigation {
@apply flex items-center justify-between bg-gray-800 p-4 text-white md:hidden;
}

.mobile-logo {
@apply text-lg font-bold;
}

.mobile-button {
@apply z-50  focus:outline-none;
}
/* EOL - TOP NAVIGATION */

/*  SIDEBAR CSS */
.sidebar {
@apply flex h-screen flex-col md:flex-row;
}

.logo {
@apply text-center font-bold sm:p-3 md:p-6 md:text-xl;
}

nav ul .links {
@apply hover:bg-test block px-6  py-4;
}

nav ul .mobile-links {
@apply hover:bg-test block  px-4 py-4  text-center hover:text-fountainBlue;
}

.active {
font-weight: bold;
color: #86a3da;
}
}

Обновление: это SideNavigationLayout.tsx

Код: Выделить всё

import { Link, routes } from '@redwoodjs/router'
import { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
import { useLocation } from '@redwoodjs/router'

type SideNavigationLayoutProps = {
children?: React.ReactNode
}

const SideNavigationLayout = ({ children }: SideNavigationLayoutProps) => {
const [menuOpen, setMenuOpen] = useState(false)
const location = useLocation()

const toggleMenu = () => {
setMenuOpen(!menuOpen)
}

return (


FantaTech - Gen-AI







FantaTech - Gen-AI


[list]
[*]              className={`${menuOpen ? 'mobile-links' : 'links'} ${location.pathname === routes.scrape() ? 'active' : ''}`}
to={routes.scrape()}
>
Scrape

[*]              className={`${menuOpen ? 'mobile-links' : 'links'} ${location.pathname === routes.crawl() ? 'active' : ''}`}
to={routes.crawl()}
>
Crawl

[*]              className={`${menuOpen ? 'mobile-links' : 'links'} ${location.pathname === routes.pdfUpload() ? 'active' : ''}`}
to={routes.pdfUpload()}
>
PDF Upload

[/list]



{children}

{/* Overlay for mobile menu */}
{/* {menuOpen && (
className="fixed inset-0 z-30 bg-black bg-opacity-50 md:hidden"
onClick={toggleMenu}
>
)} */}

)
}

export default SideNavigationLayout

ScrapePage.tsx

Код: Выделить всё

const ScrapePage = () => {
const [searchInput, setSearchInput] = useState('')
const [outputData, setOutputData] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [isSubmitted, setIsSubmitted] = useState(false)

const handleSubmit = async () =>  {
setIsLoading(true)
setIsSubmitted(true)
try {
const apiEndpoint = 'http://localhost:8087/simplify'

const response = await fetch(apiEndpoint, {
method: 'POST',
body: JSON.stringify({ url: searchInput }),
})

if (!response.ok) {
throw new Error('Failed to fetch results')
}

const text = await response.text()
setOutputData(text)
// setOutputData(JSON.stringify(json, null, 2));
} catch (error) {
setOutputData(`Error: ${error.message}`)
} finally {
setIsLoading(false)
}
}

const handleInputChange = (event) => {
setSearchInput(event.target.value)
setIsSubmitted(false)
}

return (








[b]Raw Output[/b]




[b]Extract[/b]






)
}

export default ScrapePage

экспортировать ScrapePage по умолчанию
RawOutput.tsx

Код: Выделить всё

const RawOutput = ({ input }: Props) => {
return (

{input || 'No input provided'}


)
}

Когда я применяю overflow-auto к родительскому элементу div, это не нарушает дизайн с точки зрения высоты:

А вот по ширине конструкция нарушена:
< img alt="изображение контейнера с нарушенным дизайном с использованием width" src="https://i.sstatic.net/WSlDNGwX.png" />
По сути, моя цель состоит в том, чтобы ширина необработанного вывода фиксировалась в зависимости от размера экрана. и будет иметь свиток, только если он слишком длинный. Прекрасным примером является такой дизайн в stackoverflow, когда общий код слишком длинный:
[img]https://i.sstatic.net /HTRQJzOy.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/793 ... ilwind-css