Merge pull request #43 from code4rena-dev/mcs/39-card-component-at-narrrow-viewports

Card Component: Enforce min size for image, break/wrap text for names & titles

Author: leo95oliveira

.github/workflows/semgrep.yml

@@ -0,0 +1,24 @@
+on:
+  workflow_dispatch: {}
+  pull_request: {}
+  push:
+    branches:
+    - main
+    - master
+    paths:
+    - .github/workflows/semgrep.yml
+  schedule:
+  # random HH:MM to avoid a load spike on GitHub Actions at 00:00
+  - cron: 29 7 * * *
+name: Semgrep
+jobs:
+  semgrep:
+    name: semgrep/ci
+    runs-on: ubuntu-20.04
+    env:
+      SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }}
+    container:
+      image: returntocorp/semgrep
+    steps:
+    - uses: actions/checkout@v3
+    - run: semgrep ci

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {

src/lib/Card/Card.scss

@@ -6,11 +6,11 @@
   background: $color__n-85;
   border-radius: $border-radius__m;
   width: 100%;
-  
+
   &--transparent {
     background: transparent;
   }
-  
+
   &--outlined {
     border: 1px solid $color__n-60;
   }
@@ -37,7 +37,7 @@
       order: 2;
     }
   }
-  
+
   &__main {
     display: flex;
     flex-direction: row;
@@ -49,6 +49,8 @@
   &__image {
     height: 5.625rem;
     width: 5.625rem;
+    min-height: 5.625rem;
+    min-width: 5.625rem;
     border-radius: 50%;
     overflow: hidden;
     display: flex;
@@ -66,11 +68,15 @@
     &--l {
       height: 9rem;
       width: 9rem;
+      min-height: 9rem;
+      min-width: 9rem;
     }
 
     &--s {
       height: 4rem;
       width: 4rem;
+      min-height: 4rem;
+      min-width: 4rem;
     }
 
     &--radius-l {
@@ -106,12 +112,13 @@
     margin: 0 $spacing__m;
     flex-grow: 1;
     order: 2;
+    word-break: break-all;
   }
 
   &__cta {
     order: 3;
   }
-  
+
   &__footer {
     color: $color__n-10;
     border-top: 1px solid $color__n-60;
@@ -120,10 +127,10 @@
     justify-content: space-between;
     padding: 0;
   }
-  
+
   &__footer-link-wrapper {
     padding: 0;
-    
+
     a {
       color: $color__n-10;
       border-left: 1px solid $color__n-60;
@@ -136,10 +143,10 @@
       }
     }
   }
-  
+
   &__footer-details {
     padding: $spacing__s $spacing__m;
     margin: 0;
     justify-self: flex-start;
   }
-}
+}