fix(nfts): snaefell-ui scroll fixes

packages/snaefell-ui/src/components/ConnectButton/ConnectButton.svelte

@@ -89,7 +89,7 @@
         Connecting
       {/if}
     {:else}
-      <CircleUserIcon size="16" class={classNames('w-[200px] h-12')} />
+      <CircleUserIcon size="24" class={classNames('h-12')} />
       {#if windowSize !== 'sm'}
         Connect Wallet{/if}
     {/if}

packages/snaefell-ui/src/components/ConnectButton/classes.ts

@@ -33,8 +33,10 @@ export const addressClasses = classNames(
 export const chainIconClasses = classNames('w-[24px]', 'mx-2.5');
 
 export const connectButtonClasses = classNames(
-  'w-max',
   'h-[44px]',
+  'w-max',
+  'bg-primary',
+  'hover:bg-secondary',
   'rounded-full',
   'flex flex-row',
   'justify-center',

packages/snaefell-ui/src/components/Mint/EligibilityPanel.svelte

@@ -39,7 +39,7 @@
 
   const texts: Record<IStep, string> = {
     eligible: 'You are eligible to mint Snaefell NFT',
-    'non-eligible': 'Unfortunately, you were not an Alpha-1 testnet contributors.',
+    'non-eligible': 'Unfortunately, you were not an Alpha-1 testnet contributor.',
     success: 'You’ve successfully minted your Snaefell NFT. Thank you for being here from the start!',
   };
 

packages/snaefell-ui/src/components/Mint/Mint.svelte

@@ -13,7 +13,7 @@
   import getConfig from '../../lib/wagmi/getConfig';
   import type { IAddress } from '../../types';
   import { NftRenderer } from '../NftRenderer';
-  import { leftHalfPanel, rightHalfPanel, wrapperClasses } from './classes';
+  import { leftHalfPanel, nftRendererWrapperMobileClasses, rightHalfPanel, wrapperClasses } from './classes';
   import { default as EligibilityPanel } from './EligibilityPanel.svelte';
   import { default as MintForm } from './MintForm.svelte';
 
@@ -117,25 +117,12 @@
     </div>
   {/if}
   <div class={rightHalfPanel}>
-    <!-- proper tree-->
-
-    <!--
-      {#if isReady && canMint}
-      <MintForm
-    {totalSupply}
-    {gasCost}
-    {mintMax}
-    {isCalculating}
-    {progress}
-    isReady={isReady} />
-    {:else if isReady && !canMint}
-    <EligibilityPanel step="non-eligible" />
-    {:else}
-
+    {#if windowSize === 'sm'}
+      <div class={nftRendererWrapperMobileClasses}>
+        <NftRenderer />
+      </div>
     {/if}
 
-    -->
-
     {#if isReady && (canMint || mintStep > 0)}
       {#if mintStep === 0}
         <EligibilityPanel

packages/snaefell-ui/src/components/Mint/MintForm.svelte

@@ -12,15 +12,13 @@
   import type { IMint } from '$stores/mint';
   import { Spinner } from '$ui/Spinner';
 
-  import { NftRenderer } from '../NftRenderer';
   import {
     counterClasses,
     currentMintedClasses,
     infoRowClasses,
     maxMintedClasses,
     mintContentClasses,
     mintTitleClasses,
-    nftRendererWrapperMobileClasses,
   } from './classes';
 
   const dispatch = createEventDispatcher();
@@ -39,11 +37,6 @@
 
 <div class={classNames('w-full', 'h-full')}>
   <!-- svelte-ignore missing-declaration -->
-  {#if windowSize === 'sm'}
-    <div class={nftRendererWrapperMobileClasses}>
-      <NftRenderer />
-    </div>
-  {/if}
 
   <div class={mintTitleClasses}>{$t('content.mint.title')}</div>
 

packages/snaefell-ui/src/components/Mint/classes.ts

@@ -16,7 +16,7 @@ export const wrapperClasses = classNames(
 );
 
 export const halfPanel = classNames(
-  'h-full',
+  'h-max',
   'md:w-max',
   'flex flex-col',
   'items-center',
@@ -41,7 +41,7 @@ export const counterClasses = classNames(
 );
 
 export const nftRendererWrapperClasses = 'rounded-3xl overflow-hidden';
-export const nftRendererWrapperMobileClasses = 'rounded-3xl my-8 overflow-hidden';
+export const nftRendererWrapperMobileClasses = 'rounded-3xl lg:my-8 my-4 overflow-hidden aspect-square';
 
 export const mintTitleClasses = classNames(
   'text-[45px]/[52px]',

packages/snaefell-ui/src/components/core/Section/Section.svelte

@@ -18,10 +18,9 @@
     'flex flex-col',
     'items-center',
     'justify-center',
-    background === 'none' ? 'bg-background-body' : null,
-    background !== 'none' ? 'bg-cover bg-center' : null,
+    background === 'none' ? '' : null,
+    background !== 'none' ? 'bg-cover bg-bottom' : null,
     background === 'general' ? 'bg-custom' : null,
-    'carousel-item',
   );
 
   $: sectionClasses = classNames(

packages/snaefell-ui/src/components/core/Section/SectionContainer.svelte

@@ -9,7 +9,7 @@
     pageScroll.set(scrollTarget.scrollTop > 100);
   }
 
-  const sectionContainerClasses = classNames('w-full', 'h-full', 'z-0', 'carousel', 'carousel-vertical', $$props.class);
+  const sectionContainerClasses = classNames('w-full', 'h-full', 'z-0', $$props.class);
 </script>
 
 <div bind:this={scrollTarget} on:scroll={handleScroll} class={sectionContainerClasses}>

packages/snaefell-ui/src/components/sections/Footer.section.svelte

@@ -42,7 +42,7 @@
     'md:px-12',
   );
 
-  const contentWrapperClasses = classNames('pt-32', 'w-full', 'h-full');
+  const contentWrapperClasses = classNames('w-full', 'h-full');
 </script>
 
 <Section height={'fit'} class={sectionClasses} width="xl">

packages/snaefell-ui/src/routes/+page.svelte

@@ -16,7 +16,7 @@
     width={windowSize === 'sm' ? 'full' : 'md'}
     background="general"
     class="items-center justify-center"
-    height={'full'}>
+    height={'fit'}>
     <Mint />
   </Section>