fix: Update styles to fix the image resolution on smaller devices (#2618)

app/javascript/dashboard/assets/scss/views/settings/channel.scss

@@ -8,12 +8,12 @@
   .channel {
     @include flex;
     @include padding($space-normal $zero);
-    @include margin($zero);
     @include background-white;
     @include border-light;
-    flex-direction: column;
+
     cursor: pointer;
-    border-right-color: $color-white;
+    flex-direction: column;
+    margin: -1px;
     transition: all 0.200s ease-in;
 
     &:last-child {
@@ -32,14 +32,13 @@
 
     img {
       @include margin($space-normal auto);
-      flex: 1;
       width: 50%;
     }
 
-    .channel__title{
-      font-size: $font-size-large;
-      text-align: center;
+    .channel__title {
       color: $color-body;
+      font-size: var(--font-size-default);
+      text-align: center;
       text-transform: capitalize;
     }
 

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="small-3 columns channel"
+    class="small-6 medium-4 large-3 columns channel"
     :class="{ inactive: !isActive }"
     @click="onItemClick"
   >

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -173,8 +173,8 @@
         "FINISH_MESSAGE": "Start forwarding your emails to the following email address."
       },
       "AUTH": {
-        "TITLE": "Channels",
-        "DESC": "Currently, we support Website live chat widgets, Facebook Pages, Twitter profiles and Whatsapp as platforms. We have more platforms like Email, Telegram and Line in the works, which will be out soon."
+        "TITLE": "Choose a channel",
+        "DESC": "Chatwoot supports live-chat widget, Facebook page, Twitter profile, Whatsapp, Email etc., as channels. If you want to build a custom channel, you can create it using the API channel. Select one channel from the options below to proceed."
       },
       "AGENTS": {
         "TITLE": "Agents",

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wizard-body small-9 columns">
+  <div class="wizard-body small-12 medium-9 columns height-auto">
     <page-header
       :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.AUTH.DESC')"
@@ -77,3 +77,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+.height-auto {
+  height: auto;
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row content-box full-height">
     <woot-wizard
-      class="small-3 columns"
+      class="hide-for-small-only medium-3 columns"
       :global-config="globalConfig"
       :items="items"
     />