fix(FormLayoutGroup): FormItem width with long text in top prop makes…

… second FormItem overflows (#7819) (#7826) Если внутри FormLayoutGroup лежит по крайней мере 2 FormItem в горизонтальной ориентации и у первого FormItem в свойстве top очень длинный текст, то размер первого FormItem может увеличится на столько, что он вытеснит за пределы FormLayoutGroup второй FormItem.
VKCOM · Oct 24, 2024 · a934760 · a934760
1 parent 835b56c
commit a934760
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.e2e-playground.tsx b/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.e2e-playground.tsx
@@ -75,7 +75,10 @@ export const FormLayoutGroupPlayground = (props: ComponentPlaygroundProps) => {
               </FormItem>
             </React.Fragment>,
             <React.Fragment key="">
-              <FormItem htmlFor="tooLongTop" top="Сверху очень длинная надпись аж распирает">
+              <FormItem
+                htmlFor="tooLongTop"
+                top="Сверху очень длинная надпись аж распирает. Такая длинная, что не должна поместиться, но и не должна вытеснить следующий FormItem из группы"
+              >
                 <Input id="tooLongTop" />
               </FormItem>
               <FormItem htmlFor="theSameLongTop" top="И у меня тоже не короче твоей">

diff --git a/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.module.css b/packages/vkui/src/components/FormLayoutGroup/FormLayoutGroup.module.css
@@ -2,6 +2,7 @@
   border: 0;
   padding: 0;
   margin: 0;
+  min-inline-size: auto;
 }
 
 .FormLayoutGroup--mode-horizontal {