fixes

2026-03-07 06:29:30 -07:00 · 2025-07-10 22:10:54 +03:00
parent 77a588ea56
commit 8866f339c2
17 changed files with 242 additions and 34 deletions
--- a/src/assets/common/hero.webp
+++ b/src/assets/common/hero.webp
--- a/src/components/landing/Footer/Footer.vue
+++ b/src/components/landing/Footer/Footer.vue
@@ -21,6 +21,9 @@
          <a href="https://www.jsrepo.com/" target="_blank" class="footer-link">
            CLI
          </a>
+          <a href="https://reactbits.dev/" target="_blank" class="footer-link">
+            React Bits
+          </a>
        </div>
      </div>
    </footer>
--- a/src/content/Backgrounds/Aurora/Aurora.vue
+++ b/src/content/Backgrounds/Aurora/Aurora.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" :class="className" :style="style" class="w-full h-full"></div>
+  <div ref="containerRef" :class="className" :style="style" class="relative"></div>
 </template>

 <script setup lang="ts">
@@ -162,8 +162,13 @@ const initAurora = () => {

  const resize = () => {
    if (!container) return
-    const width = container.offsetWidth
-    const height = container.offsetHeight
+
+    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth
+    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight
+
+    const width = Math.max(parentWidth, 300)
+    const height = Math.max(parentHeight, 300)
+
    renderer!.setSize(width, height)
    if (program) {
      program.uniforms.uResolution.value = [width, height]
@@ -189,7 +194,7 @@ const initAurora = () => {
      uTime: { value: 0 },
      uAmplitude: { value: props.amplitude },
      uColorStops: { value: colorStopsArray },
-      uResolution: { value: [container.offsetWidth, container.offsetHeight] },
+      uResolution: { value: [Math.max(container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth, 300), Math.max(container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight, 300)] },
      uBlend: { value: props.blend },
      uIntensity: { value: props.intensity },
    },
@@ -201,6 +206,9 @@ const initAurora = () => {
  gl.canvas.style.width = '100%'
  gl.canvas.style.height = '100%'
  gl.canvas.style.display = 'block'
+  gl.canvas.style.position = 'absolute'
+  gl.canvas.style.top = '0'
+  gl.canvas.style.left = '0'

  const update = (t: number) => {
    animateId = requestAnimationFrame(update)
@@ -263,4 +271,22 @@ watch(
    initAurora()
  }
 )
-</script>
+</script>
+
+<style scoped>
+div {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:deep(canvas) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
--- a/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
+++ b/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="relative w-full h-full overflow-hidden">
-    <canvas ref="canvasRef" class="block w-full h-full" />
+  <div class="relative overflow-hidden">
+    <canvas ref="canvasRef" class="absolute top-0 left-0 w-full h-full" />
    <div v-if="outerVignette"
      class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0)_60%,_rgba(0,0,0,1)_100%)]" />
    <div v-if="centerVignette"
@@ -112,19 +112,24 @@ const resizeCanvas = () => {
  if (!parent) return

  const dpr = window.devicePixelRatio || 1
-  const rect = parent.getBoundingClientRect()
+  
+  const parentWidth = parent.parentElement?.offsetWidth || parent.offsetWidth || window.innerWidth
+  const parentHeight = parent.parentElement?.offsetHeight || parent.offsetHeight || window.innerHeight
+  
+  const width = Math.max(parentWidth, 300)
+  const height = Math.max(parentHeight, 300)

-  canvas.width = rect.width * dpr
-  canvas.height = rect.height * dpr
+  canvas.width = width * dpr
+  canvas.height = height * dpr

-  canvas.style.width = `${rect.width}px`
-  canvas.style.height = `${rect.height}px`
+  canvas.style.width = `${width}px`
+  canvas.style.height = `${height}px`

  if (context.value) {
    context.value.setTransform(dpr, 0, 0, dpr, 0, 0)
  }

-  const { columns, rows } = calculateGrid(rect.width, rect.height)
+  const { columns, rows } = calculateGrid(width, height)
  initializeLetters(columns, rows)
  drawLetters()
 }
@@ -243,4 +248,22 @@ watch([() => props.glitchSpeed, () => props.smooth], () => {
  }
  animate()
 })
-</script>
+</script>
+
+<style scoped>
+div {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:deep(canvas) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
--- a/src/content/Backgrounds/Lightning/Lightning.vue
+++ b/src/content/Backgrounds/Lightning/Lightning.vue
@@ -1,5 +1,5 @@
 <template>
-  <canvas ref="canvasRef" class="w-full h-full block mix-blend-screen"></canvas>
+  <canvas ref="canvasRef" class="w-full h-full block mix-blend-screen relative"></canvas>
 </template>

 <script setup lang="ts">
@@ -134,10 +134,38 @@ const initWebGL = () => {

  const resizeCanvas = () => {
    const rect = canvas.getBoundingClientRect()
-    canvas.width = rect.width
-    canvas.height = rect.height
-    canvas.style.width = rect.width + 'px'
-    canvas.style.height = rect.height + 'px'
+    const dpr = window.devicePixelRatio || 1
+    
+    let width = rect.width
+    let height = rect.height
+    
+    let parent = canvas.parentElement
+    while (parent && (!width || !height)) {
+      if (parent.offsetWidth && parent.offsetHeight) {
+        width = parent.offsetWidth
+        height = parent.offsetHeight
+        break
+      }
+      parent = parent.parentElement
+    }
+    
+    if (!width || !height) {
+      width = window.innerWidth
+      height = window.innerHeight
+    }
+    
+    width = Math.max(width, 300)
+    height = Math.max(height, 300)
+    
+    canvas.width = width * dpr
+    canvas.height = height * dpr
+    
+    canvas.style.width = '100%'
+    canvas.style.height = '100%'
+    canvas.style.display = 'block'
+    canvas.style.position = 'absolute'
+    canvas.style.top = '0'
+    canvas.style.left = '0'
  }

  resizeCanvas()
@@ -234,3 +262,16 @@ watch(
  () => {}
 )
 </script>
+
+<style scoped>
+canvas {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  z-index: 1 !important;
+}
+</style>
--- a/src/content/Backgrounds/Particles/Particles.vue
+++ b/src/content/Backgrounds/Particles/Particles.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" :class="className" class="relative w-full h-full"></div>
+  <div ref="containerRef" :class="className" class="relative"></div>
 </template>

 <script setup lang="ts">
@@ -142,19 +142,31 @@ const initParticles = () => {
  gl.canvas.style.width = '100%'
  gl.canvas.style.height = '100%'
  gl.canvas.style.display = 'block'
+  gl.canvas.style.position = 'absolute'
+  gl.canvas.style.top = '0'
+  gl.canvas.style.left = '0'

  camera = new Camera(gl, { fov: 15 })
  camera.position.set(0, 0, props.cameraDistance)

  const resize = () => {
-    const width = container.clientWidth
-    const height = container.clientHeight
+    if (!container) return
+    
+    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth
+    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight
+    
+    const width = Math.max(parentWidth, 300)
+    const height = Math.max(parentHeight, 300)
+    
    renderer!.setSize(width, height)
    camera!.perspective({ aspect: width / height })

    gl.canvas.style.width = '100%'
    gl.canvas.style.height = '100%'
    gl.canvas.style.display = 'block'
+    gl.canvas.style.position = 'absolute'
+    gl.canvas.style.top = '0'
+    gl.canvas.style.left = '0'
  }
  window.addEventListener('resize', resize, false)
  resize()
@@ -312,3 +324,21 @@ watch(
  () => {}
 )
 </script>
+
+<style scoped>
+div {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:deep(canvas) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
--- a/src/content/Backgrounds/Silk/Silk.vue
+++ b/src/content/Backgrounds/Silk/Silk.vue
@@ -125,8 +125,28 @@ const initSilk = () => {

  const resize = () => {
    if (!container || !camera) return
-    const width = container.offsetWidth
-    const height = container.offsetHeight
+    
+    let width = container.offsetWidth
+    let height = container.offsetHeight
+    
+    let parent = container.parentElement
+    while (parent && (!width || !height)) {
+      if (parent.offsetWidth && parent.offsetHeight) {
+        width = parent.offsetWidth
+        height = parent.offsetHeight
+        break
+      }
+      parent = parent.parentElement
+    }
+    
+    if (!width || !height) {
+      width = window.innerWidth
+      height = window.innerHeight
+    }
+    
+    width = Math.max(width, 300)
+    height = Math.max(height, 300)
+        
    renderer!.setSize(width, height)
    camera.perspective({ aspect: width / height })

@@ -168,6 +188,10 @@ const initSilk = () => {
  gl.canvas.style.width = '100%'
  gl.canvas.style.height = '100%'
  gl.canvas.style.display = 'block'
+  gl.canvas.style.position = 'absolute'
+  gl.canvas.style.top = '0'
+  gl.canvas.style.left = '0'
+  gl.canvas.style.zIndex = '1'

  let lastTime = 0
  const update = (t: number) => {
@@ -230,3 +254,20 @@ watch(
  () => {}
 )
 </script>
+
+<style scoped>
+div {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+}
+
+:deep(canvas) {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+  object-fit: cover !important;
+}
+</style>
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -27,4 +27,42 @@ body {
 .back-to-top {
  background: #0b0b0b !important;
  border: 1px solid #142216;
+}
+
+/* Mobile toast container fixes */
+@media (max-width: 640px) {
+  .p-toast {
+    position: fixed !important;
+    bottom: 1rem !important;
+    right: 1rem !important;
+    left: 1rem !important;
+    width: auto !important;
+    max-width: calc(100vw - 2rem) !important;
+  }
+  
+  .p-toast-message {
+    max-width: 100% !important;
+    min-width: unset !important;
+    width: 100% !important;
+    margin: 0 !important;
+    font-size: 0.875rem !important;
+    padding: 0.75rem !important;
+    box-sizing: border-box !important;
+  }
+  
+  .p-toast-message-content {
+    padding: 0.5rem !important;
+    gap: 0.5rem !important;
+  }
+  
+  .p-toast-message-text {
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    hyphens: auto !important;
+  }
+  
+  .p-toast-message-summary {
+    font-size: 0.875rem !important;
+    line-height: 1.25 !important;
+  }
 }
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -5,7 +5,7 @@
        <div class="demo-container relative py-6 overflow-hidden">
          <RefreshButton @click="forceRerender" />

-          <div :key="key" class="flex justify-center items-center h-96">
+          <div :key="key" class="flex justify-center items-center">
            <AnimatedContent :direction="direction" :delay="delay" :distance="distance" :reverse="reverse"
              :duration="duration" :ease="ease" :initial-opacity="initialOpacity" :animate-opacity="animateOpacity"
              :scale="scale" :threshold="threshold" @complete="() => console.log('✅ Animation Complete!')">
--- a/src/demo/Backgrounds/AuroraDemo.vue
+++ b/src/demo/Backgrounds/AuroraDemo.vue
@@ -4,7 +4,7 @@
      <template #preview>
        <div class="demo-container">
          <Aurora :color-stops="colorStops" :amplitude="amplitude" :blend="blend" :speed="speed"
-            :intensity="intensity" class="w-full h-96" />
+            :intensity="intensity" class="w-full" />
        </div>

        <Customize>
--- a/src/demo/Backgrounds/LetterGlitchDemo.vue
+++ b/src/demo/Backgrounds/LetterGlitchDemo.vue
@@ -10,7 +10,7 @@
            :center-vignette="showCenterVignette"
            :outer-vignette="showOuterVignette"
            :smooth="smooth"
-            class="w-full h-96"
+            class="w-full h-full"
          />
        </div>

--- a/src/demo/Backgrounds/LightningDemo.vue
+++ b/src/demo/Backgrounds/LightningDemo.vue
@@ -4,7 +4,7 @@
      <template #preview>
        <div class="demo-container">
          <Lightning :hue="hue" :x-offset="xOffset" :speed="speed" :intensity="intensity"
-            :size="size" class="w-full h-96" />
+            :size="size" class="w-full h-full" />
        </div>

        <Customize>
--- a/src/demo/Backgrounds/ParticlesDemo.vue
+++ b/src/demo/Backgrounds/ParticlesDemo.vue
@@ -6,7 +6,7 @@
          <Particles :key="rerenderKey" :particle-colors="[color]" :particle-count="particleCount"
            :particle-spread="particleSpread" :speed="speed" :particle-base-size="baseSize"
            :move-particles-on-hover="moveParticlesOnHover" :alpha-particles="alphaParticles"
-            :disable-rotation="disableRotation" class="w-full h-96" />
+            :disable-rotation="disableRotation" class="w-full h-full" />
        </div>

        <Customize>
--- a/src/demo/Backgrounds/SilkDemo.vue
+++ b/src/demo/Backgrounds/SilkDemo.vue
@@ -4,7 +4,7 @@
      <template #preview>
        <div class="demo-container">
          <Silk :speed="speed" :scale="scale" :color="color" :noise-intensity="noiseIntensity" :rotation="rotation"
-            class="w-full h-96" />
+            class="w-full h-full" />
        </div>

        <Customize>
--- a/src/demo/Backgrounds/WavesDemo.vue
+++ b/src/demo/Backgrounds/WavesDemo.vue
@@ -3,7 +3,7 @@
    <TabbedLayout>
      <template #preview>
        <div class="demo-container">
-          <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-96" />
+          <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
        </div>

        <Customize>
--- a/src/demo/Components/CardSwapDemo.vue
+++ b/src/demo/Components/CardSwapDemo.vue
@@ -14,7 +14,7 @@
            </p>
          </div>

-          <div class="w-full lg:w-1/2 h-96 lg:h-full relative">
+          <div class="w-full lg:w-1/2 h-full lg:h-full relative">
            <CardSwap :key="rerenderKey" :width="500" :height="400" :card-distance="cardDistance"
              :vertical-distance="verticalDistance" :delay="delay" :skew-amount="skewAmount" :easing="easing"
              :pause-on-hover="pauseOnHover" @card-click="handleCardClick">
--- a/src/pages/LandingPage.vue
+++ b/src/pages/LandingPage.vue
@@ -1,7 +1,12 @@
 <template>
  <section class="landing-wrapper">
-    <div v-if="isMobile" class="mobile-hero-background-container">
-      <!-- Hero image will be added when available -->
+    <div v-if="isMobile" class="mobile-hero-background-container" style="z-index: 0;">
+      <img
+        :src="heroImage"
+        alt="Hero background"
+        class="mobile-hero-background-image"
+        style="transform: translateY(-200px);"
+      />
    </div>

    <PlasmaWave :y-offset="-300" :x-offset="100" :rotation-deg="-30" />
@@ -19,6 +24,7 @@ import PlasmaWave from '@/components/landing/PlasmaWave/PlasmaWave.vue'
 import Footer from '@/components/landing/Footer/Footer.vue'
 import FeatureCards from '@/components/landing/FeatureCards/FeatureCards.vue'
 import StartBuilding from '@/components/landing/StartBuilding/StartBuilding.vue'
+import heroImage from '@/assets/common/hero.webp'
 const isMobile = ref(false)

 const checkIsMobile = () => {