Update design

app/javascript/widget/views/Home.vue

@@ -34,13 +34,6 @@ export default {
     portal() {
       return window.chatwootWebChannel.portal;
     },
-    showArticles() {
-      return (
-        this.portal &&
-        !this.articleUiFlags.isFetching &&
-        this.popularArticles.length
-      );
-    },
     defaultLocale() {
       const widgetLocale = this.widgetLocale;
       const { allowed_locales: allowedLocales, default_locale: defaultLocale } =
@@ -94,36 +87,29 @@ export default {
 </script>
 
 <template>
-  <div
-    class="z-50 flex flex-col flex-1 w-full rounded-md"
-    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
-  >
-    <div class="w-full px-4 pt-4">
-      <TeamAvailability
-        :available-agents="availableAgents"
-        :has-conversation="!!conversationSize"
-        :unread-count="unreadMessageCount"
-        @start-conversation="startConversation"
+  <div class="z-50 flex flex-col flex-1 w-full p-4 gap-4">
+    <TeamAvailability
+      :available-agents="availableAgents"
+      :has-conversation="!!conversationSize"
+      :unread-count="unreadMessageCount"
+      @start-conversation="startConversation"
+    />
+
+    <div
+      v-if="portal"
+      class="w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-5 py-4"
+    >
+      <ArticleHero
+        v-if="
+          !articleUiFlags.isFetching &&
+          !articleUiFlags.isError &&
+          popularArticles.length
+        "
+        :articles="popularArticles"
+        @view="openArticleInArticleViewer"
+        @view-all="viewAllArticles"
       />
-    </div>
-    <div v-if="showArticles" class="w-full px-4 py-2">
-      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
-        <ArticleHero
-          v-if="
-            !articleUiFlags.isFetching &&
-            !articleUiFlags.isError &&
-            popularArticles.length
-          "
-          :articles="popularArticles"
-          @view="openArticleInArticleViewer"
-          @view-all="viewAllArticles"
-        />
-      </div>
-    </div>
-    <div v-if="articleUiFlags.isFetching" class="w-full px-4 py-2">
-      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
-        <ArticleCardSkeletonLoader />
-      </div>
+      <ArticleCardSkeletonLoader v-else />
     </div>
   </div>
 </template>