#Fix 23679 : Displaying horizontal scroll and Cards are not visible (oppia#23750)

* CSS fix display flex for  exploration and collection card

* Lint checks

* Lint checks

---------

Co-authored-by: mosin74 <mosin74@gmail.com>

Author: 2 people

core/templates/components/summary-tile/collection-summary-tile.component.html

@@ -22,7 +22,7 @@ <h3 class="activity-title e2e-test-collection-summary-tile-title">
           {{ getObjective | truncateAndCapitalize: 95 }}
           <span *ngIf="!getObjective">No objective specified.</span>
         </div>
-        <ul class="metrics layout-align-space-between-center layout-row">
+        <ul class="metrics layout-row">
           <li>
             <span>
               {{ 'I18N_COMMUNITY_LIBRARY_PAGE_COLLECTION' | translate }} ({{ getNodeCount }})
@@ -104,7 +104,13 @@ <h3 class="mobile-collection-title e2e-test-collection-summary-tile-title">{{ ge
     position: absolute;
     width: 36px;
   }
-
+  .oppia-activity-summary-tile .layout-row {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 100%;
+  }
   .mobile-activity-summary-card {
     box-shadow: slategrey 2px 4px 4px 0;
     padding: 0 0 0 0;

core/templates/components/summary-tile/exploration-summary-tile.component.css

@@ -110,6 +110,13 @@ oppia-exploration-summary-tile .exploration-summary-btn span {
   font-size: 16px;
 }
 
+oppia-exploration-summary-tile .oppia-exploration-dashboard-card .layout-row {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  max-width: 100%;
+}
 @media (max-width: 480px) {
   oppia-exploration-summary-tile .exploration-summary-btn {
     font-size: 13px;
@@ -123,4 +130,5 @@ oppia-exploration-summary-tile .exploration-summary-btn span {
   oppia-exploration-summary-tile .exploration-summary-btn span {
     font-size: 13px;
   }
+
 }

core/templates/components/summary-tile/exploration-summary-tile.component.html

@@ -64,7 +64,7 @@
           <span [innerHTML]="'I18N_LIBRARY_NO_OBJECTIVE' | translate">
           </span>
         </div>
-        <ul *ngIf="!isCollectionPreviewTile" class="metrics layout-align-space-between-center layout-row">
+        <ul *ngIf="!isCollectionPreviewTile" class="metrics layout-row">
           <li>
             <span class="e2e-test-exp-summary-tile-rating" [ngClass]="{'rating-disabled': !avgRating}">
               <span class="fas fa-star" [ngbTooltip]="'I18N_LIBRARY_RATINGS_TOOLTIP' | translate" placement="top" container="body">

core/templates/pages/library-page/library-page.component.css

@@ -222,6 +222,7 @@ oppia-library-page .button-alignment-div {
 .oppia-library-container {
   background-color: #afd2eb;
   min-height: 100vh;
+  overflow-x: hidden;
   overflow-y: auto;
   position: relative;
   width: 100%;