make desktop background resize to available space

Author: corywatilo

src/components/Desktop/index.tsx

@@ -523,8 +523,10 @@ export default function Desktop() {
                             }}
                         />
                         <div
-                            className={`absolute bottom-4 md:bottom-12 -right-4 xs:right-8 md:right-0 ${
-                                websiteMode ? 'keyboard-garden-images hidden' : ''
+                            className={`absolute ${
+                                websiteMode
+                                    ? 'bottom-4 -right-4 @[2600px]:right-4'
+                                    : 'bottom-4 md:bottom-12 -right-4 xs:right-8 md:right-0'
                             }`}
                         >
                             <CloudinaryImage
@@ -533,15 +535,31 @@ export default function Desktop() {
                                 alt=""
                                 width={1401}
                                 height={1400}
-                                className="size-[300px] md:size-[700px] dark:hidden"
+                                className={`${websiteMode ? '' : 'size-[300px] md:size-[700px]'} dark:hidden`}
+                                style={
+                                    websiteMode
+                                        ? {
+                                              width: 'clamp(8rem, calc(4rem + (100vw - 80rem) * 0.45), 42rem)',
+                                              height: 'clamp(8rem, calc(4rem + (100vw - 80rem) * 0.45), 42rem)',
+                                          }
+                                        : undefined
+                                }
                             />
                             <CloudinaryImage
                                 loading="lazy"
                                 src="https://res.cloudinary.com/dmukukwp6/image/upload/keyboard_garden_dark_opt_15e213413c.png"
                                 alt=""
                                 width={1401}
                                 height={1400}
-                                className="size-[300px] md:size-[700px] hidden dark:block"
+                                className={`${websiteMode ? '' : 'size-[300px] md:size-[700px]'} hidden dark:block`}
+                                style={
+                                    websiteMode
+                                        ? {
+                                              width: 'clamp(8rem, calc(4rem + (100vw - 80rem) * 0.45), 42rem)',
+                                              height: 'clamp(8rem, calc(4rem + (100vw - 80rem) * 0.45), 42rem)',
+                                          }
+                                        : undefined
+                                }
                             />
                         </div>
                     </div>

src/styles/global.css

@@ -2646,9 +2646,3 @@ div[data-radix-popper-content-wrapper] {
 .dark .ph-mapbox-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
     border-left-color: rgb(30 31 35) !important;
 }
-
-@media (min-width: 2650px) {
-    .keyboard-garden-images {
-        display: block;
-    }
-}