Fix the width bounce of the clock on the AudioPlayer (#8320)

luixxiul · t3chguy · web-flow · commit e2a612b07083 · 2022-05-11T11:58:07.000+01:00
* Remove the hardcoded width of the clock on the AudioPlayer

Signed-off-by: Suguru Hirahara &lt;luixxiul@users.noreply.github.com&gt;

* Use text-align: justify

Signed-off-by: Suguru Hirahara &lt;luixxiul@users.noreply.github.com&gt;

Co-authored-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;
diff --git a/res/css/views/audio_messages/_AudioPlayer.scss b/res/css/views/audio_messages/_AudioPlayer.scss
@@ -58,10 +58,10 @@ limitations under the License.
         }
 
         .mx_Clock {
-            width: $font-42px; // we're not using a monospace font, so fake it
             min-width: $font-42px; // for flexbox
-            padding-left: 4px; // isolate from seek bar
-            text-align: right;
+            padding-left: $spacing-4; // isolate from seek bar
+            text-align: justify;
+            white-space: nowrap;
         }
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -58,10 +58,10 @@ limitations under the License.`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`.mx_Clock {`
`61`		`- width: $font-42px; // we're not using a monospace font, so fake it`
`62`	`61`	`min-width: $font-42px; // for flexbox`
`63`		`- padding-left: 4px; // isolate from seek bar`
`64`		`- text-align: right;`
	`62`	`+ padding-left: $spacing-4; // isolate from seek bar`
	`63`	`+ text-align: justify;`
	`64`	`+ white-space: nowrap;`
`65`	`65`	`}`
`66`	`66`	`}`
`67`	`67`	`}`