diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
index 3edbb3b47..886cf34b6 100644
--- a/src/common/AddonDetailsModal/AddonDetails/styles.less
+++ b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -11,7 +11,7 @@
             float: left;
             width: 5rem;
             height: 5rem;
-            margin-right: 1rem;
+            margin-right: 1.5rem;
             padding: 0.5rem;
             background-color: @color-background-dark5;
         }
@@ -26,27 +26,28 @@
         }
 
         .name-container {
+            flex-grow: 1;
+            flex-shrink: 1;
+            flex-basis: 0;
             display: flex;
             flex-direction: row;
+            flex-wrap: wrap;
             align-items: baseline;
-            width: 100%;
-
+    
             .name {
-                margin-right: 1rem;
-                max-width: 80%;
-                max-height: 1.2em;
-                white-space: pre;
-                text-overflow: ellipsis;
-                font-size: 2rem;
-                font-weight: 300;
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-right: 0.5rem;
+                font-size: 1.6rem;
                 color: @color-background-dark5-90;
             }
-
+    
             .version {
-                max-width: 20%;
-                max-height: 1.2em;
-                white-space: pre;
-                text-overflow: ellipsis;
+                flex-grow: 1;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-top: 0.5rem;
                 color: @color-background-dark5-60;
             }
         }
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 481cd0960..7676a96aa 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -211,13 +211,14 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        width: 30rem;
 
         .logo, .icon {
             flex: none;
             float: left;
             width: 5rem;
             height: 5rem;
-            margin-right: 1rem;
+            margin-right: 1.5rem;
             padding: 0.5rem;
         }
 
@@ -231,27 +232,28 @@
         }
 
         .name-container {
+            flex-grow: 1;
+            flex-shrink: 1;
+            flex-basis: 0;
             display: flex;
             flex-direction: row;
+            flex-wrap: wrap;
             align-items: baseline;
-            width: 100%;
-
+    
             .name {
-                margin-right: 1rem;
-                max-width: 80%;
-                max-height: 1.2em;
-                white-space: pre;
-                text-overflow: ellipsis;
-                font-size: 2rem;
-                font-weight: 300;
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-right: 0.5rem;
+                font-size: 1.6rem;
                 color: @color-background-dark5-90;
             }
-
+    
             .version {
-                max-width: 20%;
-                max-height: 1.2em;
-                white-space: pre;
-                text-overflow: ellipsis;
+                flex-grow: 1;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-top: 0.5rem;
                 color: @color-background-dark5-60;
             }
         }