From 97d6a3200b14528794af244df5862a4a3b774465 Mon Sep 17 00:00:00 2001
From: AlexisDanlos <91090088+AlexisDanlos@users.noreply.github.com>
Date: Sun, 16 Mar 2025 23:39:30 +0100
Subject: [PATCH] feat: implement dynamic width for typed digits display in
 CallPage

---
 dialer/lib/features/call/call_page.dart | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/dialer/lib/features/call/call_page.dart b/dialer/lib/features/call/call_page.dart
index b502412..72013de 100644
--- a/dialer/lib/features/call/call_page.dart
+++ b/dialer/lib/features/call/call_page.dart
@@ -68,6 +68,22 @@ class _CallPageState extends State<CallPage> {
     final double nameFontSize = isKeypadVisible ? 24.0 : 24.0; // Smaller font
     final double statusFontSize = isKeypadVisible ? 16.0 : 16.0; // Smaller status
 
+    // Calculate max visible chars based on screen width
+    double screenWidth = MediaQuery.of(context).size.width;
+    // Estimate ~14 pixels per character for the digit display (fontSize 24)
+    // Subtract some padding (40) for the margins
+    int estimatedMaxChars = ((screenWidth - 80) ~/ 14).clamp(10, 100) - 1;
+
+    // Helper function to format the displayed digits with dynamic width
+    String _formatDisplayDigits() {
+      if (_typedDigits.length <= estimatedMaxChars) {
+        return _typedDigits;
+      } else {
+        // Show ellipsis at the beginning and the most recent digits
+        return '...' + _typedDigits.substring(_typedDigits.length - estimatedMaxChars + 3);
+      }
+    }
+
     return Scaffold(
       body: Container(
         color: Colors.black,
@@ -130,7 +146,7 @@ class _CallPageState extends State<CallPage> {
                   children: [
                     if (isKeypadVisible) ...
                       [
-                      // Typed digits display remains the same
+                      // Updated typed digits display with dynamic width
                       Padding(
                         padding: const EdgeInsets.symmetric(horizontal: 20.0),
                         child: Row(
@@ -138,10 +154,10 @@ class _CallPageState extends State<CallPage> {
                           children: [
                             Expanded(
                               child: Text(
-                                _typedDigits,
+                                _formatDisplayDigits(),
                                 maxLines: 1,
                                 textAlign: TextAlign.right,
-                                overflow: TextOverflow.ellipsis,
+                                overflow: TextOverflow.visible,
                                 style: const TextStyle(
                                   fontSize: 24,
                                   color: Colors.white,