(refactor) improving content responsivness

app/ui/InfoBox.tsx

@@ -10,7 +10,7 @@ export const InfoBox: FC<{
     const t = useTranslations("info-box");
 
   return (
-    <details className="group border border-gray-800 rounded-lg p-2 mb-1 w-[17rem] sm:w-[28rem]">
+    <details className="group border border-gray-800 rounded-lg p-2 mb-1 w-full max-w-md">
       <summary className="flex cursor-pointer items-center justify-between">
         <span className="font-bold"><QuestionMarkCircleIcon className="w-6 h-6 inline mr-1 mt-[-.3em] text-green-300" /> {title ?? t("default-title")}</span>
         <span className="ml-2 text-sm text-gray-500 group-open:hidden"><ChevronDownIcon className="w-5 h-5 inline" /></span>

app/ui/LocationEditForm.tsx

@@ -238,7 +238,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                             </select>
                             {
                                 formValues.tenantPaymentMethod === "none" && formValues.proofOfPaymentType === "combined" ?
-                                    <p className="mt-4 ml-4 text-sm w-[17rem] sm:w-[28rem] text-yellow-600">
+                                    <p className="mt-4 ml-4 text-sm w-full sm:w-[30rem] text-yellow-600">
                                         {
                                             t.rich("proof-of-payment-attachment-type--option--combined--hint",
                                                 {
@@ -247,15 +247,13 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                                             )
                                         }
                                     </p> :
-                                    <p className="mt-4 ml-4 text-sm w-[17rem] sm:w-[28rem] italic text-gray-500">
+                                    <p className="mt-4 ml-4 text-sm w-full sm:w-[30rem] italic text-gray-500">
                                         {
                                             formValues.proofOfPaymentType === "combined" ?
                                                 t("proof-of-payment-attachment-type--option--combined--tooltip") :
                                                 t("proof-of-payment-attachment-type--option--per-bill--tooltip")
                                         }
                                     </p>
-
-
                             }
                         </fieldset>
                     </fieldset>

app/ui/UserSettingsForm.tsx

@@ -282,7 +282,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                 
                 { formValues.enableRevolutPayment ? (
                 <div className="animate-expand-fade-in origin-top">
-                    <div className="divider mt-2 mb-2 font-bold uppercase">{t("revolut-form-title")}</div>
+                    <div className="divider mt-2 mb-2 font-bold uppercase max-w-[14em]">{t("revolut-form-title")}</div>
                     <div className="form-control w-full">
                         <label className="label">
                             <span className="label-text">{t("revolut-profile-label")}</span>
@@ -370,7 +370,7 @@ export const UserSettingsForm: FC<UserSettingsFormProps> = ({ userSettings }) =>
     const t = useTranslations("user-settings-form");
 
     return (
-        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+        <div className="card card-compact card-bordered max-w-[90em] bg-base-100 shadow-s my-1">
             <div className="card-body">
                 <h2 className="card-title"><SettingsIcon className="w-6 h-6" /> {t("title")}</h2>
                 <form action={dispatch}>
@@ -387,7 +387,7 @@ export const UserSettingsForm: FC<UserSettingsFormProps> = ({ userSettings }) =>
 
 export const UserSettingsFormSkeleton: FC = () => {
     return (
-        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+        <div className="card card-compact card-bordered max-w-[90em] bg-base-100 shadow-s my-1">
             <div className="card-body">
                 <div className="h-8 w-32 skeleton mb-4"></div>
                 <div className="input w-full skeleton"></div>

messages/hr.json

@@ -240,7 +240,7 @@
     "revolut-payment-instructions--intro-message": "Aktiviranjem ove opcije, mjesečni obračun poslan podstanaru sadržavati će link putem kojeg će podstanar moći izvršiti izravnu uplatu sredstava na vaš Revolut račun.",
     "revolut-payment-instructions--toggle-label": "omogući Revolut uplatu",
 
-    "revolut-form-title": "Informacije za uplatu na Revolut",
+    "revolut-form-title": "Info za uplatu na Revolut",
     "revolut-profile-label": "Naziv vašeg Revolut profila",
     "revolut-profile-placeholder": "profil putem kojeg ćete primati uplate",
     "revolut-profile-tooltip": "Naziv vašeg Revolut profila možete pronaći u aplikaciji Revolut u korisničkom profilu. Prikazan je ispod vašeg imena i prezimena - počinje sa znakom '@' (npr: '@ivan123').",