Refine player info row layout to prevent icon clipping

src/app/player/player.component.css

@@ -46,9 +46,50 @@
     position: relative;
 }
 
+.media-info-row {
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+.view-column {
+    align-items: center;
+    display: flex;
+    padding-right: 0;
+}
+
+.view-count {
+    align-items: center;
+    display: inline-flex;
+    font-size: 0.9rem;
+    font-weight: 500;
+    gap: 4px;
+    white-space: nowrap;
+}
+
+.view-icon {
+    font-size: 18px;
+    height: 18px;
+    width: 18px;
+}
+
+.media-description-column {
+    min-width: 0;
+}
+
+.media-description {
+    font-size: 0.9rem;
+    line-height: 1.2;
+    margin: 0;
+}
+
+.no-description {
+    text-align: center;
+}
+
 .action-column {
     display: flex;
     justify-content: flex-end;
+    padding-left: 0;
 }
 
 .action-buttons-row {
@@ -56,15 +97,20 @@
     display: flex;
     flex-wrap: nowrap;
     justify-content: flex-end;
-    overflow-x: auto;
     white-space: nowrap;
-    width: 100%;
 }
 
 .action-buttons-row button {
     flex: 0 0 auto;
 }
 
+.action-buttons-row .mat-mdc-icon-button {
+    --mdc-icon-button-state-layer-size: 40px;
+    height: 40px;
+    padding: 8px;
+    width: 40px;
+}
+
 .save-button {
     right: 25px;
     position: fixed;

src/app/player/player.component.html

@@ -14,25 +14,28 @@
           </div>
           <div style="height: fit-content; width: 100%; margin-top: 10px;">
             <div class="container">
-              <div class="row">
-                <div class="col-2 col-lg-1">
+              <div class="row media-info-row">
+                <div class="col-auto view-column">
                   @if (db_file) {
-                    {{db_file['local_view_count'] ? db_file['local_view_count']+1 : 1}}&nbsp;<ng-container i18n="View count label">views</ng-container>
+                    <span class="view-count" [matTooltip]="(db_file['local_view_count'] ? db_file['local_view_count']+1 : 1) + ' views'" i18n-matTooltip="View count tooltip">
+                      <mat-icon class="view-icon">visibility</mat-icon>
+                      {{db_file['local_view_count'] ? db_file['local_view_count']+1 : 1}}
+                    </span>
                   }
                 </div>
-                <div style="white-space: pre-line;" class="col-8 col-lg-9">
+                <div style="white-space: pre-line;" class="col media-description-column">
                   @if (db_file && db_file['description']) {
-                    <p>
-                      <app-see-more [text]="db_file['description']"></app-see-more>
+                    <p class="media-description">
+                      <app-see-more [text]="db_file['description']" [line_limit]="1"></app-see-more>
                     </p>
                   }
                   @if (!db_file || !db_file['description']) {
-                    <p i18n="No description" style="text-align: center;">
+                    <p class="media-description no-description" i18n="No description">
                                             No description available.
                                         </p>
                   }
                 </div>
-                <div class="col-2 action-column">
+                <div class="col-auto action-column">
                   <span class="action-buttons-row">
                     @if (db_playlist) {
                       <span class="buttons">