Merge pull request #1939 from ardriveapp/fix-profile-card-alignment

fix alignment
ardriveapp · Dec 12, 2024 · fa6070f · fa6070f
2 parents c2350fa + 924bb25
commit fa6070f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 30 deletions.
diff --git a/lib/components/app_top_bar.dart b/lib/components/app_top_bar.dart
@@ -27,7 +27,7 @@ class AppTopBar extends StatelessWidget {
       height: 110,
       width: double.maxFinite,
       child: Padding(
-        padding: const EdgeInsets.only(right: 24.0),
+        padding: const EdgeInsets.only(right: 17.0),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.center,
           mainAxisAlignment: MainAxisAlignment.end,

diff --git a/lib/components/profile_card.dart b/lib/components/profile_card.dart
@@ -714,18 +714,30 @@ class ProfileCardHeader extends StatelessWidget {
       return 100;
     }
 
-    double width = primaryName.length * 15;
-    return width.clamp(110, 220);
+    double width = primaryName.length * 20;
+
+    return width.clamp(110, 230);
   }
 
   String _getTruncatedWalletAddress(String primaryName, String walletAddress) {
     if (primaryName.length > 20) {
       return truncateString(walletAddress, offsetStart: 10, offsetEnd: 10);
     }
+    var offsetStart = primaryName.length ~/ 2;
+    var offsetEnd = primaryName.length ~/ 2;
+
+    if (offsetStart < 6) {
+      offsetStart = 3;
+    }
+
+    if (offsetEnd < 6) {
+      offsetEnd = 3;
+    }
+
     return truncateString(
       walletAddress,
-      offsetStart: primaryName.length ~/ 2,
-      offsetEnd: primaryName.length ~/ 2,
+      offsetStart: offsetStart,
+      offsetEnd: offsetEnd,
     );
   }
 
@@ -741,8 +753,8 @@ class ProfileCardHeader extends StatelessWidget {
           image: NetworkImage(
             'https://arweave.net/${state.primaryNameDetails.logo}',
           ),
-          width: 28,
-          height: 28,
+          width: 34,
+          height: 34,
           fit: BoxFit.cover,
           errorBuilder: (context, error, stackTrace) {
             return const SizedBox.shrink();
@@ -763,38 +775,40 @@ class ProfileCardHeader extends StatelessWidget {
     final colorTokens = ArDriveTheme.of(context).themeData.colorTokens;
     final icon = _buildProfileIcon(state);
 
-    return SizedBox(
-      height: 46,
-      width: maxWidth,
+    return ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: maxWidth),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-        mainAxisSize: MainAxisSize.max,
+        mainAxisSize: MainAxisSize.min,
         children: [
           if (icon != null) icon,
-          Expanded(
+          Flexible(
             child: SizedBox(
               height: 46,
-              width: maxWidth,
               child: Column(
                 mainAxisSize: MainAxisSize.min,
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Text(
-                    primaryName,
-                    overflow: TextOverflow.ellipsis,
-                    maxLines: 1,
-                    style: typography.paragraphLarge(
-                      fontWeight: ArFontWeight.semiBold,
-                      color: colorTokens.textHigh,
+                  Flexible(
+                    child: Text(
+                      primaryName,
+                      overflow: TextOverflow.ellipsis,
+                      maxLines: 1,
+                      style: typography.paragraphLarge(
+                        fontWeight: ArFontWeight.semiBold,
+                        color: colorTokens.textHigh,
+                      ),
                     ),
                   ),
-                  Text(
-                    truncatedWalletAddress,
-                    overflow: TextOverflow.clip,
-                    maxLines: 1,
-                    style: typography.paragraphSmall(
-                      fontWeight: ArFontWeight.book,
-                      color: colorTokens.textLow,
+                  Flexible(
+                    child: Text(
+                      truncatedWalletAddress,
+                      overflow: TextOverflow.clip,
+                      maxLines: 1,
+                      style: typography.paragraphSmall(
+                        fontWeight: ArFontWeight.book,
+                        color: colorTokens.textLow,
+                      ),
                     ),
                   ),
                 ],

diff --git a/packages/ardrive_ui/lib/src/components/button.dart b/packages/ardrive_ui/lib/src/components/button.dart
@@ -381,9 +381,11 @@ class _ArDriveButtonNewState extends State<ArDriveButtonNew> {
     final buttonH = widget.maxHeight ?? buttonDefaultHeight;
 
     if (widget.content != null) {
-      return SizedBox(
-        height: buttonH,
-        width: widget.maxWidth,
+      return ConstrainedBox(
+        constraints: BoxConstraints(
+          maxWidth: widget.maxWidth ?? double.infinity,
+          maxHeight: buttonH,
+        ),
         child: TextButton(
           onPressed: widget.onPressed,
           style: style,