diff --git a/flutter/lib/common/widgets/overlay.dart b/flutter/lib/common/widgets/overlay.dart
index d9684bace..aaf52fb07 100644
--- a/flutter/lib/common/widgets/overlay.dart
+++ b/flutter/lib/common/widgets/overlay.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hbb/common.dart';
 import 'package:provider/provider.dart';
@@ -316,44 +317,49 @@ class _DraggableState extends State<Draggable> {
 }
 
 class QualityMonitor extends StatelessWidget {
-  static const textStyle = TextStyle(color: MyTheme.grayBg);
   final QualityMonitorModel qualityMonitorModel;
   QualityMonitor(this.qualityMonitorModel);
 
+  Widget _row(String info, String? value) {
+    return Row(
+      children: [
+        Expanded(
+            flex: 8,
+            child: AutoSizeText(info,
+                style: TextStyle(color: MyTheme.grayBg),
+                textAlign: TextAlign.right,
+                maxLines: 1)),
+        Spacer(flex: 1),
+        Expanded(
+            flex: 8,
+            child: AutoSizeText(value ?? '',
+                style: TextStyle(color: MyTheme.grayBg), maxLines: 1)),
+      ],
+    );
+  }
+
   @override
   Widget build(BuildContext context) => ChangeNotifierProvider.value(
       value: qualityMonitorModel,
       child: Consumer<QualityMonitorModel>(
-          builder: (context, qualityMonitorModel, child) =>
-              qualityMonitorModel.show
-                  ? Container(
-                      padding: const EdgeInsets.all(8),
-                      color: MyTheme.canvasColor.withAlpha(120),
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text(
-                            "Speed: ${qualityMonitorModel.data.speed ?? ''}",
-                            style: textStyle,
-                          ),
-                          Text(
-                            "FPS: ${qualityMonitorModel.data.fps ?? ''}",
-                            style: textStyle,
-                          ),
-                          Text(
-                            "Delay: ${qualityMonitorModel.data.delay ?? ''} ms",
-                            style: textStyle,
-                          ),
-                          Text(
-                            "Target Bitrate: ${qualityMonitorModel.data.targetBitrate ?? ''}kb",
-                            style: textStyle,
-                          ),
-                          Text(
-                            "Codec: ${qualityMonitorModel.data.codecFormat ?? ''}",
-                            style: textStyle,
-                          ),
-                        ],
-                      ),
-                    )
-                  : const SizedBox.shrink()));
+          builder: (context, qualityMonitorModel, child) => qualityMonitorModel
+                  .show
+              ? Container(
+                  constraints: BoxConstraints(maxWidth: 200),
+                  padding: const EdgeInsets.all(8),
+                  color: MyTheme.canvasColor.withAlpha(120),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      _row("Speed", qualityMonitorModel.data.speed ?? ''),
+                      _row("FPS", qualityMonitorModel.data.fps ?? ''),
+                      _row(
+                          "Delay", "${qualityMonitorModel.data.delay ?? ''}ms"),
+                      _row("Target Bitrate",
+                          "${qualityMonitorModel.data.targetBitrate ?? ''}kb"),
+                      _row("Codec", qualityMonitorModel.data.codecFormat ?? ''),
+                    ],
+                  ),
+                )
+              : const SizedBox.shrink()));
 }
diff --git a/src/ui/remote.css b/src/ui/remote.css
index 66c5ce80f..71b2c1682 100644
--- a/src/ui/remote.css
+++ b/src/ui/remote.css
@@ -16,7 +16,7 @@ div#quality-monitor {
     padding: 5px;
     min-width: 150px;
     color: azure;
-    border: solid azure;
+    border: 0.5px solid azure;
 }
 
 video#handler {