update: text in info widget & add scroll gradient

app/lib/widgets/info_layer.dart

@@ -60,46 +60,74 @@ class InfoLayerState extends State<InfoLayer> {
 
   @override
   Widget build(BuildContext context) {
-    return SingleChildScrollView(
-        child: Container(
-          padding: const EdgeInsets.all(45),
-          color: Colors.black.withOpacity(0.8),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center, // Align contents vertically centered
-            children: [
-              Text(
-                'Color categorization',
-                style: subHeadingStyle,
+    return Stack(
+        children: [
+          SingleChildScrollView(
+            child: Container(
+              padding: const EdgeInsets.all(45),
+              color: Colors.black.withOpacity(0.8),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center, // Align contents vertically centered
+                children: [
+                  Text(
+                    'Color categorization',
+                    style: subHeadingStyle,
+                  ),
+                  const SizedBox(height: 10),
+                  Text(
+                    'Each category shows the likelihood of the ice breaking '
+                        'under the weight of a single person.',
+                    style: regTextStyle,
+                    textAlign: TextAlign.center,
+                  ),
+                  const SizedBox(height: 30),
+                  _buildLegend(),
+                  const SizedBox(height: 30),
+                  Text(
+                    'Data accuracy',
+                    style: subHeadingStyle,
+                    textAlign: TextAlign.center,
+                  ),
+                  const SizedBox(height: 10),
+                  Text(
+                    'The higher the accuracy, the more likely it is that the displayed ice thickness'
+                        'is correct. The accuracy depends on'
+                        'which data sources are used to calculate the thickness. ',
+                    style: regTextStyle,
+                    textAlign: TextAlign.center,
+                  ),
+                  const SizedBox(height: 20),
+                  Text('• 1/4: only API data. \n'
+                        '• 2/4: only sensor data.\n'
+                        '• 3/4: both API and sensor data. \n'
+                        '• 4/4: both API and sensor data,  with a discrepancy of <1.0cm',
+                    style: regTextStyle,
+                  ),
+                ],
               ),
-              const SizedBox(height: 20),
-              Text(
-                'Each category shows the likelihood of the ice breaking '
-                    'under the weight of a single person.',
-                style: regTextStyle,
-                textAlign: TextAlign.center,
-              ),
-              const SizedBox(height: 30),
-              _buildLegend(),
-              const SizedBox(height: 30),
-              Text(
-                'Data accuracy',
-                style: subHeadingStyle,
-                textAlign: TextAlign.center,
-              ),
-              const SizedBox(height: 20),
-              Text(
-                'The higher the accuracy, the more likely it is that the displayed ice thickness'
-                    'is correct. The accuracy depends on'
-                    'which data sources are used to calculate the thickness.\n\n '
-                    '- 1/4: only API data. \n'
-                    '- 2/4: only sensor data.'
-                    '- 3/4: both API and sensor data. \n'
-                    '- 4/4: both API and sensor data,  with a discrepancy of <1.0cm',
-                style: regTextStyle,
-                textAlign: TextAlign.center,
+            ),
+          ),
+          Positioned( // Gradient at the bottom of the box
+            bottom: 0,
+            left: 0,
+            right: 0,
+            child: IgnorePointer(
+              child: Container(
+                height: 50,
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      Colors.black.withOpacity(0.0),
+                      Colors.black.withOpacity(0.8),
+                    ],
+                  ),
+                ),
               ),
-            ],
-          ),  ),
+            ),
+          ),
+        ],
     );
   }
 }