From 477d1d4813e66d5a280bda02208ef1d40468b08e Mon Sep 17 00:00:00 2001
From: Suvodip Ghosh <suvodip@siliconpin.com>
Date: Mon, 26 May 2025 16:27:34 +0530
Subject: [PATCH] fix overlap issue

---
 src/pages/drawing/game_drawing_png.astro | 27 +++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/pages/drawing/game_drawing_png.astro b/src/pages/drawing/game_drawing_png.astro
index 083261b..2faf29f 100644
--- a/src/pages/drawing/game_drawing_png.astro
+++ b/src/pages/drawing/game_drawing_png.astro
@@ -314,12 +314,29 @@ import Layout from '../../layouts/Layout.astro';
             .then(response => response.json())
             .then(({ data }) => {
                 // console.log(data.colors)
-                const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+               const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
                 const baseFontSize = 28;
-                const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
-                let wrapWidth;
-                if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-                const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+                let responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
+
+                // Set minimum font size for mobile
+                if (isMobile) {
+                    responsiveFontSize = Math.max(responsiveFontSize, 35); // Never smaller than 42px on mobile
+                    wrapWidth = 10;
+                } else {
+                    wrapWidth = 200;
+                }
+
+                const descrptText = this.add.text(
+                    screenCenterX, 
+                    90, 
+                    data.description, 
+                    { 
+                        font: `${responsiveFontSize}px quicksand`, 
+                        fill: '#60C6CB', 
+                        align: "center", 
+                        wordWrap: { width: window.innerWidth - wrapWidth }
+                    }
+                ).setOrigin(0.5);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })