Merge pull request #3663 from weseek/fix/5693-cards-responsive

Fix/5693 cards responsive

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -147,7 +147,6 @@ const SlackIntegration = (props) => {
       break;
   }
 
-
   return (
     <>
       <ConfirmBotChangeModal
@@ -168,19 +167,19 @@ const SlackIntegration = (props) => {
 
         {t('admin:slack_integration.selecting_bot_types.selecting_bot_type')}
 
-        <div className="row my-4">
-          <div className="card-deck mx-auto">
-            {botTypes.map((botType) => {
-              return (
+        <div className="row my-4 flex-wrap-reverse justify-content-center">
+          {botTypes.map((botType) => {
+            return (
+              <div className="m-3">
                 <BotTypeCard
                   key={botType}
                   botType={botType}
                   isActive={currentBotType === botType}
                   handleBotTypeSelect={handleBotTypeSelect}
                 />
-              );
-            })}
-          </div>
+              </div>
+            );
+          })}
         </div>
       </div>
 

src/client/styles/scss/_admin.scss

@@ -101,6 +101,7 @@ $slack-work-space-name-card-border: #efc1f6;
     }
     .admin-bot-card {
       min-width: 280px;
+      max-width: 500px;
       border-radius: 8px !important;
     }
     .border-primary {
@@ -123,13 +124,13 @@ $slack-work-space-name-card-border: #efc1f6;
       border-radius: 8px !important;
     }
     .admin-border-danger {
-      border-style : dashed;
-      border-width : 2px;
+      border-style: dashed;
+      border-width: 2px;
     }
     .admin-border-success {
-      border-width : 3px;
+      border-width: 3px;
     }
-    .circle{
+    .circle {
       width: 100px;
       height: 100px;
       // background: #092c58;