fix(ui): apply rounded-l-only to SensitiveInput textareas and increase visible text input area (#1561)

src/components/RegionSelector/index.tsx

@@ -76,7 +76,6 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
   }, [onChange, selectedRegion, name, regions]);
 
   return (
-    <div className="relative z-40 flex max-w-lg">
     <div className="w-full">
       <Listbox as="div" value={selectedRegion} onChange={setSelectedRegion}>
         {({ open }) => (
@@ -131,9 +130,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                     {({ selected, active }) => (
                       <div
                         className={`${
-                            active
-                              ? 'text-white bg-indigo-600'
-                              : 'text-gray-300'
+                          active ? 'text-white bg-indigo-600' : 'text-gray-300'
                         } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
                       >
                         <span className="mr-2 text-base">
@@ -200,9 +197,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                     {({ selected, active }) => (
                       <div
                         className={`${
-                            active
-                              ? 'text-white bg-indigo-600'
-                              : 'text-gray-300'
+                          active ? 'text-white bg-indigo-600' : 'text-gray-300'
                         } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
                       >
                         <span className="mr-2 text-base">
@@ -240,7 +235,6 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
         )}
       </Listbox>
     </div>
-    </div>
   );
 };
 

src/components/Settings/SettingsMain.tsx

@@ -322,6 +322,7 @@ const SettingsMain: React.FC = () => {
                     </span>
                   </label>
                   <div className="form-input">
+                    <div className="form-input-field">
                       <RegionSelector
                         value={values.region ?? ''}
                         name="region"
@@ -329,6 +330,7 @@ const SettingsMain: React.FC = () => {
                       />
                     </div>
                   </div>
+                </div>
                 <div className="form-row">
                   <label htmlFor="originalLanguage" className="text-label">
                     <span>{intl.formatMessage(messages.originallanguage)}</span>

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -232,6 +232,7 @@ const UserGeneralSettings: React.FC = () => {
                   </span>
                 </label>
                 <div className="form-input">
+                  <div className="form-input-field">
                     <RegionSelector
                       name="region"
                       value={values.region ?? ''}
@@ -240,6 +241,7 @@ const UserGeneralSettings: React.FC = () => {
                     />
                   </div>
                 </div>
+              </div>
               <div className="form-row">
                 <label htmlFor="originalLanguage" className="text-label">
                   <span>{intl.formatMessage(messages.originallanguage)}</span>

src/styles/globals.css

@@ -218,7 +218,7 @@ img.avatar-sm {
 }
 
 .form-input-field {
-  @apply flex max-w-lg rounded-md shadow-sm;
+  @apply flex max-w-xl rounded-md shadow-sm;
 }
 
 .actions {
@@ -268,12 +268,14 @@ textarea {
 }
 
 input.rounded-l-only,
-select.rounded-l-only {
+select.rounded-l-only,
+textarea.rounded-l-only {
   @apply rounded-r-none;
 }
 
 input.rounded-r-only,
-select.rounded-r-only {
+select.rounded-r-only,
+textarea.rounded-r-only {
   @apply rounded-l-none;
 }
 
@@ -286,7 +288,7 @@ select.short {
 }
 
 button.input-action {
-  @apply relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
+  @apply relative inline-flex items-center px-3 sm:px-3.5 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
 }
 
 .button-md svg,