Merge pull request #78 from code4rena-dev/samus/contest-tile-responsive

SamusElderg · web-flow · commit 3a19d983c1f0 · 2024-10-11T19:31:57.000+08:00
[Compact contest tile] mobile responsive changes
diff --git a/src/lib/ContestTile/ContestTile.scss b/src/lib/ContestTile/ContestTile.scss
@@ -375,8 +375,6 @@
                     header {
                         .header--status {
                             display: flex;
-                            flex-wrap: wrap;
-                            align-items: center;
                             justify-content: space-between;
                             column-gap: 1.5rem;
                             row-gap: 0.5rem;
@@ -404,11 +402,9 @@
                                 }
     
                                 &.type {
-                                    min-width: auto;
-                                    margin-left: auto;
-                                    overflow: hidden;
-                                    text-overflow: ellipsis;
-                                    white-space: nowrap;
+                                    flex-grow: 0; // Prevent the type element from growing
+                                    flex-shrink: 0; // Prevent the type element from shrinking
+                                    white-space: nowrap; // Prevent text from wrapping
                                 }
                             }
                         }
@@ -815,4 +811,15 @@
             }
         }
     }
+}
+
+// Compact tile overrides
+.c4contesttile.compact {
+    .c4conteststatus {
+        align-items: start;
+
+        .statusindicator {
+            margin-top: 8px;
+        }
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -375,8 +375,6 @@`
`375`	`375`	`header {`
`376`	`376`	`.header--status {`
`377`	`377`	`display: flex;`
`378`		`- flex-wrap: wrap;`
`379`		`- align-items: center;`
`380`	`378`	`justify-content: space-between;`
`381`	`379`	`column-gap: 1.5rem;`
`382`	`380`	`row-gap: 0.5rem;`
`@@ -404,11 +402,9 @@`
`404`	`402`	`}`
`405`	`403`
`406`	`404`	`&.type {`
`407`		`- min-width: auto;`
`408`		`- margin-left: auto;`
`409`		`- overflow: hidden;`
`410`		`- text-overflow: ellipsis;`
`411`		`- white-space: nowrap;`
	`405`	`+ flex-grow: 0; // Prevent the type element from growing`
	`406`	`+ flex-shrink: 0; // Prevent the type element from shrinking`
	`407`	`+ white-space: nowrap; // Prevent text from wrapping`
`412`	`408`	`}`
`413`	`409`	`}`
`414`	`410`	`}`
`@@ -815,4 +811,15 @@`
`815`	`811`	`}`
`816`	`812`	`}`
`817`	`813`	`}`
	`814`	`+}`
	`815`	`+`
	`816`	`+// Compact tile overrides`
	`817`	`+.c4contesttile.compact {`
	`818`	`+ .c4conteststatus {`
	`819`	`+ align-items: start;`
	`820`	`+`
	`821`	`+ .statusindicator {`
	`822`	`+ margin-top: 8px;`
	`823`	`+ }`
	`824`	`+ }`
`818`	`825`	`}`