PWA max width addde

lib/routes/route_generator.dart

@@ -28,6 +28,7 @@ import 'package:didvan/views/home/settings/profile/profile.dart';
 import 'package:didvan/views/home/studio/studio_state.dart';
 import 'package:didvan/views/splash/splash.dart';
 import 'package:didvan/routes/routes.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
@@ -165,13 +166,20 @@ class RouteGenerator {
 
   static Route _createRoute(page) {
     return MaterialPageRoute(
-      builder: (context) => Container(
+      builder: (context) {
-        color: Theme.of(context).colorScheme.surface,
+        final shortestSide = MediaQuery.of(context).size.shortestSide;
-        child: SafeArea(
+        final bool useMobileLayout = shortestSide < 600;
-          child: page,
+        if (kIsWeb && !useMobileLayout) {
-          top: false,
+          return Center(child: AspectRatio(aspectRatio: 9 / 16, child: page));
-        ),
+        }
-      ),
+        return Container(
+          color: Theme.of(context).colorScheme.surface,
+          child: SafeArea(
+            child: page,
+            top: false,
+          ),
+        );
+      },
     );
   }
 }

lib/views/home/radar/widgets/category_item.dart

@@ -4,6 +4,7 @@ import 'package:didvan/models/view/radar_category.dart';
 import 'package:didvan/views/home/radar/radar_state.dart';
 import 'package:didvan/views/widgets/animated_visibility.dart';
 import 'package:didvan/views/widgets/didvan/text.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:provider/provider.dart';
@@ -18,6 +19,22 @@ class CategoryItem extends StatelessWidget {
     required this.category,
   }) : super(key: key);
 
+  double _width(context) {
+    final Size ds = MediaQuery.of(context).size;
+    if (kIsWeb) {
+      if (!_useWebMobileLayout(context)) {
+        return ds.height / 16 * 9 / 3;
+      }
+    }
+    return ds.width / 3;
+  }
+
+  bool _useWebMobileLayout(context) {
+    final shortestSide = MediaQuery.of(context).size.shortestSide;
+    final bool useMobileLayout = shortestSide < 600;
+    return kIsWeb && useMobileLayout;
+  }
+
   @override
   Widget build(BuildContext context) {
     final Size ds = MediaQuery.of(context).size;
@@ -34,7 +51,7 @@ class CategoryItem extends StatelessWidget {
         child: AnimatedContainer(
           duration: DesignConfig.mediumAnimationDuration,
           padding: isColapsed ? const EdgeInsets.all(4) : EdgeInsets.zero,
-          width: isColapsed ? 100 : ds.width / 3,
+          width: isColapsed ? 100 : _width(context),
           alignment: Alignment.center,
           decoration: BoxDecoration(
             borderRadius: DesignConfig.lowBorderRadius,
@@ -48,8 +65,12 @@ class CategoryItem extends StatelessWidget {
                 duration: DesignConfig.mediumAnimationDuration,
                 isVisible: !isColapsed,
                 child: Container(
-                  width: ds.width / 5,
+                  width: !_useWebMobileLayout(context)
-                  height: ds.width / 5,
+                      ? _width(context) / 2
+                      : ds.width / 5,
+                  height: !_useWebMobileLayout(context)
+                      ? _width(context) / 2
+                      : ds.width / 5,
                   decoration: BoxDecoration(
                     color: Theme.of(context).colorScheme.surface,
                     boxShadow: DesignConfig.defaultShadow,