fix layout of MIH App Tile Widget

Frontend/lib/mih_components/mih_package/mih_app_tile.dart

@@ -52,19 +52,21 @@ class _MihAppTileState extends State<MihAppTile> {
 
   @override
   Widget build(BuildContext context) {
-    double borderRadius = widget.iconSize * 0.25;
+    double borderRadius = widget.iconSize * 0.15;
     return SizedBox(
       width: widget.iconSize,
+      height: widget.iconSize,
       child: Container(
         alignment: Alignment.topCenter,
-        // color: Colors.black,
-        // constraints: BoxConstraints(),
         child: Column(
           children: [
-            AnimatedContainer(
+            Flexible(
-              //alignment: Alignment.center,
+              flex: 3,
-              width: widget.iconSize,
+              child: LayoutBuilder(
-              height: widget.iconSize,
+                builder: (context, constraints) {
+                  double iconHeight = constraints.maxWidth;
+                  return AnimatedContainer(
+                    height: iconHeight,
                     duration: const Duration(seconds: 2),
                     child: Material(
                       color: widget.primaryColor,
@@ -80,28 +82,40 @@ class _MihAppTileState extends State<MihAppTile> {
                           displayHint();
                         },
                         // hoverDuration: ,
-                  splashColor:
+                        splashColor: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.highlightColor(),
+                            .theme
-                  highlightColor:
+                            .highlightColor(),
-                      MzanziInnovationHub.of(context)!.theme.highlightColor(),
+                        highlightColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .highlightColor(),
                         child: FittedBox(child: widget.appIcon),
                       ),
                     ),
+                  );
+                },
+              ),
             ),
             const SizedBox(height: 10),
-            FittedBox(
+            Flexible(
-              child: Text(
+              flex: 1,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
                     widget.appName,
                     textAlign: TextAlign.center,
                     // softWrap: true,
                     // overflow: TextOverflow.visible,
                     style: TextStyle(
-                  color:
+                      color: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                          .theme
-                  fontSize: 40.0,
+                          .secondaryColor(),
+                      fontSize: 20.0,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
+                ],
+              ),
             )
           ],
         ),