IBX-10416: Wrong styling in sub-items edit translation selector

Author: OstafinL

src/bundle/Resources/public/scss/ui/modules/sub-items-list/_language.selector.scss

@@ -3,11 +3,31 @@
         &__items {
             margin-top: calculateRem(5px);
             max-height: calc(100vh - #{calculateRem(220px)});
-            overflow: auto;
+        }
 
+        &__item {
             .form-check-label {
-                font-size: $ibexa-text-font-size;
-                line-height: calculateRem(50px);
+                background: $ibexa-color-white;
+                display: flex;
+                width: 100%;
+                padding: calculateRem(13px) calculateRem(10px);
+                margin-bottom: calculateRem(12px);
+                border: calculateRem(1px) solid $ibexa-color-light;
+                border-radius: $ibexa-border-radius;
+                box-shadow: calculateRem(4px) calculateRem(2px) calculateRem(17px) 0 rgba($ibexa-color-info, 0.05);
+                transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
+                cursor: pointer;
+                line-height: calculateRem(24px);
+
+                &:hover {
+                    border-color: $ibexa-color-dark;
+                    transform: scale(1.02) translateX(-10px);
+                    box-shadow: calculateRem(4px) calculateRem(10px) calculateRem(17px) 0 rgba($ibexa-color-info, 0.2);
+                }
+            }
+
+            .form-check-input {
+                display: none;
             }
         }
     }

src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js

@@ -39,15 +39,17 @@ const InstantFilter = (props) => {
 
     return (
         <div className="ibexa-instant-filter" ref={_refInstantFilter}>
-            <div className="ibexa-instant-filter__input-wrapper">
-                <input
-                    type="text"
-                    className="ibexa-instant-filter__input form-control"
-                    placeholder={Translator.trans(/*@Desc("Search by content type")*/ 'instant.filter.placeholder', {}, 'ibexa_sub_items')}
-                    value={filterQuery}
-                    onChange={(event) => setFilterQuery(event.target.value)}
-                />
-            </div>
+            {props.hasSearch && (
+                <div className="ibexa-instant-filter__input-wrapper">
+                    <input
+                        type="text"
+                        className="ibexa-instant-filter__input form-control"
+                        placeholder={Translator.trans(/*@Desc("Search by content type")*/ 'instant.filter.placeholder', {}, 'ibexa_sub_items')}
+                        value={filterQuery}
+                        onChange={(event) => setFilterQuery(event.target.value)}
+                    />
+                </div>
+            )}
             <div className="ibexa-instant-filter__items">
                 {props.items.map((item) => {
                     const radioId = `item_${item.value}`;
@@ -76,11 +78,13 @@ const InstantFilter = (props) => {
 };
 
 InstantFilter.propTypes = {
+    hasSearch: PropTypes.bool,
     items: PropTypes.array,
     handleItemChange: PropTypes.func,
 };
 
 InstantFilter.defaultProps = {
+    hasSearch: true,
     items: [],
     handleItemChange: () => {},
 };

src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/language.selector.compoment.js

@@ -29,7 +29,7 @@ const LanguageSelector = (props) => {
         <div className={className}>
             <div className="ibexa-extra-actions__header">{props.label}</div>
             <div className="ibexa-extra-actions__content">
-                <InstantFilter items={props.languageItems} handleItemChange={props.handleItemChange} />
+                <InstantFilter items={props.languageItems} handleItemChange={props.handleItemChange} hasSearch={false} />
             </div>
         </div>
     );