fix: adjust full-size for next/image components

src/components/Layout/Sidebar/index.tsx

@@ -147,16 +147,16 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                   </div>
                   <div
                     ref={navRef}
-                    className="flex flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
+                    className="flex flex-1 flex-col overflow-y-auto pb-8 sm:pb-4"
                   >
                     <div className="flex flex-shrink-0 items-center px-2">
-                      <span className="px-4 text-xl text-gray-50">
-                        <Link href="/">
+                      <span className="w-full px-2 text-xl text-gray-50">
+                        <Link href="/" className="relative block h-24">
                           <Image src="/logo_full.svg" alt="Logo" fill />
                         </Link>
                       </span>
                     </div>
-                    <nav className="mt-16 flex-1 space-y-4 px-4">
+                    <nav className="mt-4 flex-1 space-y-4 px-4">
                       {SidebarLinks.filter((link) =>
                         link.requiredPermission
                           ? hasPermission(link.requiredPermission, {
@@ -217,15 +217,15 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
       <div className="fixed top-0 bottom-0 left-0 z-30 hidden lg:flex lg:flex-shrink-0">
         <div className="sidebar flex w-64 flex-col">
           <div className="flex h-0 flex-1 flex-col">
-            <div className="flex flex-1 flex-col overflow-y-auto pt-8 pb-4">
+            <div className="flex flex-1 flex-col overflow-y-auto pb-4">
               <div className="flex flex-shrink-0 items-center">
-                <span className="px-4 text-2xl text-gray-50">
-                  <Link href="/">
+                <span className="w-full px-4 text-2xl text-gray-50">
+                  <Link href="/" className="relative block h-24">
                     <Image src="/logo_full.svg" alt="Logo" fill />
                   </Link>
                 </span>
               </div>
-              <nav className="mt-16 flex-1 space-y-4 px-4">
+              <nav className="mt-8 flex-1 space-y-4 px-4">
                 {SidebarLinks.filter((link) =>
                   link.requiredPermission
                     ? hasPermission(link.requiredPermission, {

src/components/Login/index.tsx

@@ -87,13 +87,10 @@ const Login = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <Image
-          src="/logo_stacked.svg"
-          className="mb-10 max-w-full"
-          alt="Logo"
-          fill
-        />
-        <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
+        <div className="relative h-48 w-full max-w-full">
+          <Image src="/logo_stacked.svg" alt="Logo" fill />
+        </div>
+        <h2 className="mt-12 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.signinheader)}
         </h2>
       </div>

src/components/ResetPassword/RequestResetLink.tsx

@@ -50,13 +50,10 @@ const ResetPassword = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <Image
-          src="/logo_stacked.svg"
-          className="mb-10 max-w-full"
-          alt="Logo"
-          fill
-        />
-        <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
+        <div className="relative h-48 w-full max-w-full">
+          <Image src="/logo_stacked.svg" alt="Logo" fill />
+        </div>
+        <h2 className="mt-12 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
         </h2>
       </div>

src/components/ResetPassword/index.tsx

@@ -65,13 +65,10 @@ const ResetPassword = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <Image
-          src="/logo_stacked.svg"
-          className="mb-10 max-w-full"
-          alt="Logo"
-          fill
-        />
-        <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
+        <div className="relative h-48 w-full max-w-full">
+          <Image src="/logo_stacked.svg" alt="Logo" fill />
+        </div>
+        <h2 className="mt-12 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
         </h2>
       </div>

src/components/Setup/index.tsx

@@ -78,12 +78,9 @@ const Setup = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-4xl">
-        <Image
-          src="/logo_stacked.svg"
-          className="mb-10 max-w-full sm:mx-auto sm:max-w-md"
-          alt="Logo"
-          fill
-        />
+        <div className="relative mb-10 h-48 max-w-full sm:mx-auto sm:h-64 sm:max-w-md">
+          <Image src="/logo_stacked.svg" alt="Logo" fill />
+        </div>
         <AppDataWarning />
         <nav className="relative z-50">
           <ul