24289 - style: fix flexgrid to wrap on small sized screens and smaller

src/components/bcros/businessDetails/Links.vue

@@ -176,7 +176,7 @@ const contacts = getContactInfo('registries')
 </script>
 
 <template>
-  <div class="flex flex-row gap-3 items-center">
+  <div class="flex flex-wrap gap-x-3 gap-y-1 items-center max-w-bcros">
     <!-- Dissolution Confirmation Dialog -->
     <BcrosDialog
       attach="#businessDetails"
@@ -255,7 +255,7 @@ const contacts = getContactInfo('registries')
         @click="showCommentDialog(true)"
       >
         <template #leading>
-          <UIcon name="i-mdi-message-reply" size="small" />
+          <UIcon name="i-mdi-message-text-outline" size="small" />
         </template>
         <span class="font-13 ml-1 text-nowrap">{{ $t('label.comments.comment', (comments?.length || 0 )) }}</span>
       </UButton>

src/components/bcros/businessDetails/index.vue

@@ -94,9 +94,13 @@ watch(() => route.params.identifier as string, loadComponentData, { immediate: t
 </script>
 
 <template>
-  <div id="bcros-business-details" class="bg-white h-[150px]" data-cy="business-details">
-    <div class="flex pt-5 text-bcGovGray-900 app-inner-container">
-      <div class="grow" data-cy="business-details-name">
+  <div
+    id="bcros-business-details"
+    class="flex gap-5 bg-white w-full pt-7 px-3 justify-center"
+    data-cy="business-details"
+  >
+    <div class="flex flex-wrap pt-5 text-bcGovGray-900 grow max-w-bcros">
+      <div data-cy="business-details-name" class="grow md:w-3/4 w-full p-3">
         <BcrosBusinessDetailsHeader />
         <div class="pt-2">
           <BcrosBusinessDetailsStatus />
@@ -105,10 +109,10 @@ watch(() => route.params.identifier as string, loadComponentData, { immediate: t
           <BcrosBusinessDetailsLinks :is-staff="true" :current-business="currentBusiness" />
         </div>
       </div>
-      <div class="justify-self-end" data-cy="business-details-info">
+      <div class="md:w-1/4 w-full p-3" data-cy="business-details-info">
         <dl class="text-sm">
           <template v-for="info in businessInfo" :key="info.name">
-            <div v-if="info.show" class="flex gap-0 mb-1 items-center">
+            <div v-if="info.show" class="flex flex-wrap gap-0 mb-1 items-center">
               <dt class="font-bold mr-2">
                 {{ info.term }}:
               </dt>
@@ -117,13 +121,13 @@ watch(() => route.params.identifier as string, loadComponentData, { immediate: t
               </dd>
               <dd
                 v-else
-                class="flex items-center cursor-pointer"
+                class="items-center cursor-pointer"
                 :data-cy="'value-' + info.name"
                 @mouseover="info.showChangeButton = true"
                 @mouseleave="info.showChangeButton = false"
                 @click="goToBusinessProfilePage"
               >
-                <span>{{ info.value }}</span>
+                <span class="break-normal">{{ info.value }}</span>
                 <UButton
                   v-show="info.showChangeButton"
                   class="ml-1 text-sm"

src/components/bcros/filing/CommonTemplate.vue

@@ -24,7 +24,7 @@
               variant="ghost"
               @click.stop="isShowBody = !isShowBody"
             >
-              <UIcon name="i-mdi-message-reply" size="small" />
+              <UIcon name="i-mdi-message-text-outline" size="small" />
               <span>
                 {{ isShowBody ? $t('label.filing.detail') : $t('label.filing.detail') }}
                 ({{ filing.commentsCount }})</span>

src/components/bcros/filing/common/DetailsList.vue

@@ -18,7 +18,7 @@ const showCommentDialog = (show: boolean) => {
     <div class="flex flex-row gap-2">
       <div class="mt-auto pb-4">
         <strong>
-          <UIcon name="i-mdi-message-reply" class="my-auto" />
+          <UIcon name="i-mdi-message-text-outline" size="small" />
           <span class="pl-1">
             {{ $t('label.filing.detail') }} ({{ filing.comments?.length || 0 }})</span>
         </strong>

src/components/bcros/header/Index.vue

@@ -4,10 +4,7 @@
     class="bg-bcGovColor-darkBlue border-b-2 border-yellow-400"
     data-cy="bcros-header"
   >
-    <div
-      id="bcros-main-header__container"
-      class="flex flex-wrap content-center h-[68px] app-inner-container"
-    >
+    <div id="bcros-main-header__container">
       <nav id="bcros-main-header__container__actions" class="flex flex-wrap content-center h-[50px] w-full">
         <a id="bcros-main-header__container__actions__home-redirect" class="flex" @click="goToBcrosHome()">
           <picture>

src/components/bcros/todo/expansion-content/CorrectionComment.vue

@@ -13,7 +13,7 @@ defineProps({
     <UDivider class="my-6" />
     <template v-if="comment">
       <p class="mb-2">
-        <UIcon name="i-mdi-message-reply" />
+        <UIcon name="i-mdi-message-text-outline" />
         <span class="ml-1">Detail</span>
       </p>
       <p class="body-2 detail-body pre-line pt-4 mb-0">

src/pages/errors.vue

@@ -27,7 +27,7 @@ const dialogToShow = computed(() => {
   return x ? ErrorModalsE.UNAUTHORIZED_ACCESS_TO_ENTITY : ''
 })
 
-const defaultDialgoOptions = {
+const defaultDialogOptions = {
   title: '',
   text: '', // content slot is used
   hideClose: true,
@@ -54,7 +54,7 @@ const registriesContact = getContactInfo('registries')
   <BcrosDialogCardedModal
     name="UnauthorizedAccessToEntityErrorModal"
     :display="showUnauthorizedAccess"
-    :options="defaultDialgoOptions"
+    :options="defaultDialogOptions"
     @close="goHome()"
   >
     <template #header>

tailwind.config.ts

@@ -3,6 +3,12 @@ export default {
   content: [],
   theme: {
     extend: {
+      maxWidth: {
+        bcros: '1336px'
+      },
+      width: {
+        bcros: '1336px'
+      },
       colors: {
         bcGovColor: {
           darkBlue: '#003366'