diff --git a/src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue b/src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue index a0663e42..2ba638a8 100644 --- a/src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue +++ b/src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue @@ -1,10 +1,11 @@ + +
+

+ Modules + + +

+
+
+
{{ module.name }}
+
+ {{ module.version }} +
+
+
+
@@ -117,36 +163,31 @@ const tags = computed(() => [ .sentry-page-tags__title { @include text-muted; - @apply font-bold uppercase text-sm mb-5; + @apply font-bold uppercase text-sm flex justify-between; } -.sentry-page-tags__boxes { - @apply flex items-stretch flex-col md:flex-row mb-5 gap-x-4; +.sentry-page-tags__title-dd { + @apply ml-2 w-5 ml-auto transform rotate-180; } -.sentry-page-tags__box { - @apply border border-purple-300 dark:border-gray-400 rounded px-4 pb-2 pt-1 hover:bg-purple-50 dark:hover:bg-purple-600 cursor-pointer mb-3 md:mb-0; +.sentry-page-tags__title-dd--open { + @apply rotate-0; } -.sentry-page-tags__box-title { - @include text-muted; - @apply text-xs font-bold; -} +.sentry-page-tags__labels-wrapper { + @apply bg-gray-50 dark:bg-gray-900 p-4 rounded-md border border-purple-300 dark:border-gray-400; -.sentry-page-tags__box-name { - @apply font-bold; + & + & { + @apply mt-5; + } } -.sentry-page-tags__box-value { - @apply text-sm; +.sentry-page-tags__labels-wrapper--partial { + @apply max-h-[200px] overflow-y-auto; } .sentry-page-tags__labels { - @apply flex flex-row flex-wrap items-center text-purple-600 dark:text-purple-100 gap-3; -} - -.sentry-page-tags__labels-wrapper { - @apply bg-gray-50 dark:bg-gray-900 p-4 rounded-md border border-purple-300 dark:border-gray-400; + @apply flex flex-row flex-wrap items-center text-purple-600 dark:text-purple-100 gap-3 mt-3; } .sentry-page-tags__label { @@ -160,4 +201,24 @@ const tags = computed(() => [ .sentry-page-tags__label-value { @apply px-3 py-1 bg-purple-100 dark:bg-purple-800 rounded-r font-bold; } +.sentry-page-tags__boxes { + @apply flex items-stretch flex-col md:flex-row mb-5 gap-x-4; +} + +.sentry-page-tags__box { + @apply border border-purple-300 dark:border-gray-400 rounded px-4 pb-2 pt-1 hover:bg-purple-50 dark:hover:bg-purple-600 cursor-pointer mb-3 md:mb-0; +} + +.sentry-page-tags__box-title { + @include text-muted; + @apply text-xs font-bold; +} + +.sentry-page-tags__box-name { + @apply font-bold; +} + +.sentry-page-tags__box-value { + @apply text-sm; +} diff --git a/src/screens/sentry/ui/sentry-page/sentry-page.vue b/src/screens/sentry/ui/sentry-page/sentry-page.vue index 8b5d39d6..c4b3e28f 100644 --- a/src/screens/sentry/ui/sentry-page/sentry-page.vue +++ b/src/screens/sentry/ui/sentry-page/sentry-page.vue @@ -17,15 +17,15 @@ type Props = { const props = defineProps(); const formattedTimestamp = computed(() => - moment(props.event.payload.timestamp).toLocaleString() + moment(props.event.payload.timestamp).toLocaleString(), ); const mainException = computed( - () => props.event.payload?.exception?.values?.[0] + () => props.event.payload?.exception?.values?.[0], ); const exceptionsLength = computed( - () => props.event?.payload?.exception?.values?.length || 0 + () => props.event?.payload?.exception?.values?.length || 0, ); @@ -43,7 +43,7 @@ const exceptionsLength = computed(

{{ formattedTimestamp }}

- +