Update prod

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hawk.so",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src/components/event/RepetitionsList.vue

@@ -7,6 +7,11 @@
           v-for="column in columns"
           :key="column"
         >
+          <Icon
+            v-if="column === 'yandexMetrika'"
+            symbol="yandex-metrika"
+            class="repetitions-table__addon-icon"
+          />
           {{ getAddonName(column) }}
         </th>
       </tr>
@@ -108,17 +113,21 @@
 import { defineComponent, PropType } from 'vue';
 import { prettyTime } from '@/utils/filters';
 import EntityImage from '../utils/EntityImage.vue';
+import Icon from '../utils/Icon.vue';
 import CustomRendererBeautifiedUserAgent from '@/components/event/details/customRenderers/BeautifiedUserAgent.vue';
 import CustomRendererWindow from '@/components/event/details/customRenderers/Window.vue';
+import CustomRendererYandexMetrika from '@/components/event/details/customRenderers/YandexMetrika.vue';
 import AddonRenderers from '../../mixins/addonRenderers';
 import { HawkEvent } from '../../types/events';
 import { isObject, trim } from '../../utils';
 
 export default defineComponent({
   components: {
     EntityImage,
+    Icon,
     CustomRendererBeautifiedUserAgent,
     CustomRendererWindow,
+    CustomRendererYandexMetrika,
   },
   mixins: [
     AddonRenderers,
@@ -340,6 +349,13 @@ export default defineComponent({
       width: 22px;
     }
 
+    &__addon-icon {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+      vertical-align: -2px;
+    }
+
     th {
       white-space: nowrap;
     }

src/components/event/details/DetailsAddons.vue

@@ -13,6 +13,11 @@
         class="event-details__content-block"
       >
         <div class="event-details__key">
+          <Icon
+            v-if="key === 'yandexMetrika'"
+            symbol="yandex-metrika"
+            class="event-details__addon-icon"
+          />
           {{ getAddonName(key) }}
         </div>
         <div class="event-details__value">
@@ -57,6 +62,7 @@ import CodeBlock from '../../utils/CodeBlock.vue';
 import CustomRendererBeautifiedUserAgent from '@/components/event/details/customRenderers/BeautifiedUserAgent.vue';
 import CustomRendererWindow from '@/components/event/details/customRenderers/Window.vue';
 import CustomRendererConsoleOutput from '@/components/event/details/customRenderers/ConsoleOutput.vue';
+import CustomRendererYandexMetrika from '@/components/event/details/customRenderers/YandexMetrika.vue';
 import { EventAddons } from '@hawk.so/types';
 import AddonRenderers from '../../../mixins/addonRenderers';
 
@@ -73,6 +79,7 @@ export default defineComponent({
     CustomRendererBeautifiedUserAgent,
     CustomRendererWindow,
     CustomRendererConsoleOutput,
+    CustomRendererYandexMetrika,
   },
   mixins: [
     AddonRenderers,
@@ -119,6 +126,13 @@ export default defineComponent({
 
 <style>
   .event-details {
+    &__addon-icon {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+      vertical-align: -2px;
+    }
+
     &__single-line-code {
       line-height: 1em;
       background: var(--color-bg-code-fragment);

src/components/event/details/breadcrumbs/BreadcrumbItem.vue

@@ -8,7 +8,7 @@
       :class="{ 'breadcrumb-item__header-row--clickable': hasData }"
       @click="toggleExpanded"
     >
-      <div class="breadcrumb-item__type-column">
+      <div class="event-details__key breadcrumb-item__type-column">
         <BreadcrumbIcon
           :type="breadcrumb.type"
           :level="breadcrumb.level"
@@ -18,6 +18,7 @@
         <span
           class="breadcrumb-item__type"
           :style="colorStyle"
+          :title="t(`event.breadcrumbs.types.${formatType(breadcrumb.type)}`)"
         >
           {{ t(`event.breadcrumbs.types.${formatType(breadcrumb.type)}`) }}
         </span>
@@ -281,9 +282,7 @@ const formatTime = (timestamp: number): string => {
 
   &__header-row {
     position: relative;
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 12px;
+    display: flex;
     align-items: center;
     font-size: 13px;
     line-height: 1.4em;
@@ -305,8 +304,6 @@ const formatTime = (timestamp: number): string => {
     align-items: center;
     justify-content: flex-start;
     gap: 8px;
-    min-width: 100px;
-    max-width: 120px;
     flex-shrink: 0;
   }
 
@@ -315,14 +312,20 @@ const formatTime = (timestamp: number): string => {
   }
 
   &__type {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 13px;
     font-weight: 600;
     white-space: nowrap;
+    text-overflow: ellipsis;
     color: var(--breadcrumb-color);
   }
 
   &__content-column {
     display: flex;
     flex-direction: column;
+    flex-grow: 2;
     gap: 0;
     min-width: 0;
     max-width: 100%;