Update ProfileImage and QR components, and import @emotion/react/css

src/app/components/ProfileImage.tsx

@@ -51,13 +51,13 @@ export default function ProfileImage() {
               setIsExpanded(false)
             }}
           ></div>
-          <div className='rounded-full relative profile-image'>
+          <div className='rounded-full relative profile-image h-[80vmin]'>
             <Image
               src='/walnuts.jpg'
               alt='walnuts icon'
               width={500}
               height={500}
-              className=' h-full w-full object-contain rounded-full '
+              className=' h-full w-full rounded-full'
             />
           </div>
           <button

src/app/components/QR.tsx

@@ -27,7 +27,7 @@ export default function QR({ className }: { className?: string }) {
       <button
         onClick={() => setIsShown(true)}
         title='show QR'
-        className='w-14 h-14 sm:w-20 sm:h-20 rounded-full p-1 shadow-lg bg-gradient-to-br from-red-400 to-red-600  flex items-center justify-center hover:from-red-500 hover:to-red-600 hover:shadow-lg transition-all duration-200 outline-none focus:from-red-500 focus:to-red-600 focus:shadow-lg text-4xl sm:text-5xl'
+        className='w-14 h-14 sm:w-16 sm:h-16 rounded-full p-1 shadow-lg bg-gradient-to-br from-red-400 to-red-600  flex items-center justify-center hover:from-red-500 hover:to-red-600 hover:shadow-lg transition-all duration-200 outline-none focus:from-red-500 focus:to-red-600 focus:shadow-lg text-4xl sm:text-5xl'
       >
         <QrCode2Icon fontSize='inherit' className='text-white' />
       </button>

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react'
 import type { Metadata } from 'next'
 import { Inter, Nunito } from 'next/font/google'
 import './globals.css'
@@ -78,7 +79,7 @@ function Header() {
           <a className='logo' href='#'>
             Walnuts.dev
           </a>
-          <div className='h-full items-end flex absolute right-0 sm:static'>
+          <div className='h-full items-end flex right-0 relative'>
             <LowerDecoration className='pl-1 h-3/4' />
           </div>
         </div>

tsconfig.json

@@ -18,6 +18,7 @@
         "name": "next"
       }
     ],
+    "types": ["@emotion/react/types/css-prop"],
     "paths": {
       "@/*": ["./src/*"]
     }