Не удалось получить согласованный макет с попутным ветром для соответствующего контейнера ⇐ CSS

[Anonymous]

Я пытаюсь создать макет формы в проекте NextJS с помощью CSS попутного ветра.
вот ссылка CodeSandbox для решения этой проблемы.


После запустив код в песочнице, нажмите кнопку, чтобы просмотреть полученную веб-страницу в полном объеме.
Проблема 1: когда форма незаполнена, мы можем правильно видеть элемент input:file, как предназначено.


но как только мы добавим файл с длинным именем, размер элемента искажается, в идеале он должен обрезать лишнюю часть, хотя он и может обрезаться, но почему-то длинный текст вызывает его искажение

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

Upload Policy Doc



Allowed Duration

Ut enim ad minim veniam.


Lorem ipsum dolor sit amet.









Credit leaves monthly


Lorem ipsum dolor sit amet.







Another Size Check


Ut enim ad minim veniam.


Lorem ipsum dolor sit amet.









Upload your leave policy document


Your employees will be able to download this policy document

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

const KWSelect = ({
id,
name,
data,
className = "",
}) => {
return (



{data.map((optionSet, index) => {
const ids = `${name}-opt${index}`;
return (

{optionSet.label}

);
})}






);
};

export default KWSelect;

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

const KWInputFile = ({
accept,
id,
name,
className = "",
customFileName = "",
folderPath = "leaves",
}) => {
const [uploadStatus, setUploadStatus] = useState("idle"); // 'idle', 'uploading', 'uploaded', 'error'
const [selectedFile, setSelectedFile] = useState(null);
const fileInputRef = useRef(null);

const handleFileChange = async (event) => {
return new Promise((resolve)=>{
const file = event.target.files[0];
if (file) {
setSelectedFile(file);
setUploadStatus("uploading");
try {
setTimeout(() => {
setUploadStatus("uploaded");
resolve();
}, 1500);
} catch (error) {
// console.error("Upload failed", error);
setUploadStatus("error");
}
}
})

};

const handleCancelUpload = () => {
setSelectedFile(null);
setUploadStatus("idle");
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
// Add any additional cancellation logic if needed
};

return (





{selectedFile ? selectedFile.name : "Choose file"}

{uploadStatus === "idle" && }
{uploadStatus === "uploading" &&  (

)}
{uploadStatus === "uploaded" && (

)}




);
};

export default KWInputFile;

Проблема 2: макет использует w-1/2 для разделения двух элементов подряд пополам. как видно в случае с двумя входными тегами и двумя переключателями, если мы проверим размер элемента с помощью инструментов разработчика Chrome, мы увидим, что он разделен на идеальные половины, и оба элемента имеют одинаковую ширину,


но для строки с тегом и тегом ширина не равна, и входные данные Тег занимает немного больше места, чем тег select.
Я новичок в концепциях TailwindCSS и CSS, пожалуйста, помогите мне это исправить..

Подробнее здесь: https://stackoverflow.com/questions/787 ... -container