style: :lipstick: style (summary infos) ajuste fonte e posicao

ajustada fonte e posicao do endereco + funcao de collapsar e recolher

fase:dev | origin:escopo

src/components/dashboard/DashboardSummaryInfos.vue

@@ -15,10 +15,6 @@
             <span class="summary-name text-name text-primary font16 fontbold">
               {{ getFirstName(data?.name) || $t('dashboard_client.summary.welcome') }}
             </span>
-
-            <span class="summary-address font12 fontmedium text-text">
-              {{ formatAddress(data.address) }}
-            </span>
           </div>
         </div>
         <div class="column items-end q-gutter-y-xs col-auto">
@@ -30,11 +26,28 @@
         </div>
       </div>
 
-      <div class="row items-center justify-between no-wrap summary-address-row">
-        <!-- <div class="summary-address font10 fontmedium text-text col">
+      <div
+        class="row justify-between q-mt-xs"
+        :class="expanded ? 'items-start' : 'items-center no-wrap'"
+      >
+        <div
+          class="summary-address text-text col font12 fontmedium"
+          :class="{ ellipsis: !expanded }"
+        >
           {{ formatAddress(data.address) }}
-        </div> -->
-        <!-- <q-icon name="mdi-chevron-down" color="secondary" size="18px" class="col-auto" /> -->
+        </div>
+
+        <q-btn
+          :aria-label="$t(expanded ? 'common.collapse' : 'common.expand')"
+          :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+          class="col-auto expand-button"
+          color="secondary"
+          dense
+          flat
+          round
+          size="sm"
+          @click="expanded = !expanded"
+        />
       </div>
     </q-card-section>
   </q-card>
@@ -42,8 +55,12 @@
 
 <script setup>
 import { formatAddress, getFirstName } from 'src/helpers/utils';
+import { ref } from 'vue';
+
 defineProps({ data: { type: Object, default: () => null } });
 
+const expanded = ref(false);
+
 const avatarStyle = {
   background: 'linear-gradient(135deg, #ffd7e8 0%, #ff9acc 100%)',
   color: '#7a154f',
@@ -63,13 +80,8 @@ const avatarStyle = {
 .summary-address {
   color: #7c7c7c;
   line-height: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   max-width: 100%;
 }
 
-.min-width-0 {
-  min-width: 0;
-}
+.expand-button { margin: -6px -6px -6px 2px; }
 </style>

src/i18n/locales/en.json

@@ -1,6 +1,8 @@
 {
   "common": {
     "confirm": "Confirm",
+    "expand": "expand",
+    "collapse": "collapse",
     "actions": {
       "save": "Save",
       "cancel": "Cancel",

src/i18n/locales/es.json

@@ -1,6 +1,8 @@
 {
   "common": {
     "confirm": "Confirmar",
+    "expand": "expandir",
+    "collapse": "contraer",
     "actions": {
       "save": "Guardar",
       "cancel": "Cancelar",

src/i18n/locales/pt.json

@@ -1,6 +1,8 @@
 {
   "common": {
     "confirm": "Confirmar",
+    "expand": "expandir",
+    "collapse": "recolher",
     "actions": {
       "save": "Salvar",
       "cancel": "Cancelar",