Optimize styles for various screen sizes

This commit includes changes to padding, text size, and other style elements to improve the appearance and usability on different screen sizes.

fixes #115

Author: butschster

assets/mixins.scss

@@ -7,8 +7,11 @@
 }
 
 @mixin layout-head {
-  @apply left-10 h-12 right-0 justify-between border-b border-gray-200 dark:border-gray-700 px-4 bg-white dark:bg-gray-800 z-50;
-  @apply absolute left-0 right-0;
+  @apply justify-between bg-white dark:bg-gray-800;
+  @apply absolute left-0 right-0 z-50;
+  @apply h-9 sm:h-10 md:h-14;
+  @apply border-b border-gray-200 dark:border-gray-700;
+  @apply px-2 md:px-4;
 
   html.navbar-fixed & {
     @apply fixed left-10 md:left-14 lg:left-16 right-0;
@@ -31,6 +34,17 @@
   @apply text-2xs sm:text-xs md:text-sm lg:text-base;
 }
 
+@mixin button {
+  @apply px-1 sm:px-3 py-0.5 sm:py-1;
+  @apply text-white text-2xs sm:text-xs;
+  @apply transition-all duration-300;
+  @apply rounded-sm;
+
+  &[disabled] {
+    @apply bg-gray-400 dark:bg-gray-700 opacity-40 text-gray-400 cursor-not-allowed;
+  }
+}
+
 @mixin loading {
     position: absolute;
     display: inline-block;

pages/index.vue

@@ -147,24 +147,8 @@ export default defineComponent({
 
 .events-page__welcome {
   @include layout-body;
-  @apply flex-1 flex flex-col justify-center items-center bg-gray-50 dark:bg-gray-800 min-h-screen;
-}
-
-.events-page__btn-stop-events {
-  @apply mr-3 text-xs text-gray-800 dark:text-white rounded-sm hover:opacity-100 transition-all duration-300 opacity-40 relative;
-
-  &[disabled] {
-    @apply hover:opacity-40;
-  }
-}
-
-.events-page__btn-stop-events--active {
-  @apply opacity-100 text-blue-500 dark:text-blue-500;
-}
-
-.events-page__btn-stop-events-count {
-  @apply absolute right-0 bottom-0 bg-red-600 text-white w-4 h-4 rounded-full flex justify-center;
-
-  transform: translate(60%, -60%);
+  @apply min-h-screen;
+  @apply flex-1 flex flex-col justify-center items-center;
+  @apply bg-gray-50 dark:bg-gray-800;
 }
 </style>

src/entities/http-dump/ui/preview-card/preview-card.vue

@@ -28,11 +28,11 @@ const uri = decodeURI(props.event.payload.request.uri);
 @import "assets/mixins";
 
 .preview-card {
-  @apply flex flex-col;
+  @apply flex flex-col text-2xs md:text-xs;
 }
 
 .preview-card__link {
-  @apply cursor-pointer flex-grow p-3 bg-gray-200 dark:bg-gray-800;
+  @apply cursor-pointer flex-grow p-2 md:p-3 bg-gray-200 dark:bg-gray-800;
 }
 
 .preview-card__method {

src/entities/inspector/ui/inspector-stat-board/inspector-stat-board.vue

@@ -42,19 +42,21 @@ const processResult = computed(() =>
 
 <style lang="scss" scoped>
 .inspector-stat-board {
-  @apply bg-gray-200 dark:bg-gray-800 pt-5 pb-4 px-4 md:px-5 flex flex-col sm:flex-row justify-between items-start divide-y sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-500;
+  @apply flex flex-col sm:flex-row justify-between items-start;
+  @apply bg-gray-200 dark:bg-gray-800;
+  @apply divide-y sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-500;
+  @apply p-0 sm:p-4 lg:p-6;
 }
 
 .inspector-stat-board__item {
-  @apply flex-auto pb-5 sm:pb-0 sm:px-10 pt-5 sm:pt-0;
-
-  &:first-child {
-    @apply sm:px-0;
-  }
+  @apply flex-auto flex flex-row justify-between sm:flex-col sm:justify-start;
+  @apply w-full sm:w-auto;
+  @apply py-2 px-2 sm:py-5 sm:px-5;
 }
 
 .inspector-stat-board__item-name {
-  @apply text-gray-600 dark:text-gray-300 font-bold text-2xs mb-1 uppercase truncate;
+  @apply text-gray-600 dark:text-gray-300 font-bold text-2xs uppercase truncate;
+  @apply mb-0 sm:mb-1;
 }
 
 .inspector-stat-board__item-value {

src/entities/ray/mocks/index.ts

@@ -18,6 +18,8 @@ import raySizeMock from './ray-size.json';
 import rayTableMock from './ray-table.json';
 import rayTextMock from './ray-text.json';
 import rayTraceMock from './ray-trace.json';
+import rayBooleanTrueMock from './ray-boolean-true.json';
+import rayBooleanFalseMock from './ray-boolean-false.json';
 
 export {
   rayCallerMock,
@@ -40,4 +42,6 @@ export {
   rayTableMock,
   rayTextMock,
   rayTraceMock,
+  rayBooleanTrueMock,
+  rayBooleanFalseMock
 }

src/entities/ray/mocks/ray-boolean-false.json

@@ -0,0 +1,31 @@
+{
+  "uuid": "da076402-6f98-4ada-bae2-d77d405cf427",
+  "type": "ray",
+  "payload": {
+    "uuid": "f6edef68-5bbb-4882-b0aa-98c883078cfd",
+    "payloads": [
+      {
+        "type": "custom",
+        "content": {
+          "content": false,
+          "label": "Boolean"
+        },
+        "origin": {
+          "file": "/app/Modules/Ray/RayCommon.php",
+          "line_number": 229,
+          "hostname": "ButschsterLpp"
+        }
+      }
+    ],
+    "meta": {
+      "php_version": "8.2.5",
+      "php_version_id": 80205,
+      "project_name": "",
+      "laravel_version": "9.52.4",
+      "laravel_ray_package_version": "1.32.2.0",
+      "ray_package_version": "1.36.2.0"
+    }
+  },
+  "timestamp": 1673266869,
+  "project_id": null
+}

src/entities/ray/mocks/ray-boolean-true.json

@@ -0,0 +1,31 @@
+{
+  "uuid": "da076402-6f98-4ada-bae2-d77d405cf427",
+  "type": "ray",
+  "payload": {
+    "uuid": "f6edef68-5bbb-4882-b0aa-98c883078cfd",
+    "payloads": [
+      {
+        "type": "custom",
+        "content": {
+          "content": true,
+          "label": "Boolean"
+        },
+        "origin": {
+          "file": "/app/Modules/Ray/RayCommon.php",
+          "line_number": 229,
+          "hostname": "ButschsterLpp"
+        }
+      }
+    ],
+    "meta": {
+      "php_version": "8.2.5",
+      "php_version_id": 80205,
+      "project_name": "",
+      "laravel_version": "9.52.4",
+      "laravel_ray_package_version": "1.32.2.0",
+      "ray_package_version": "1.36.2.0"
+    }
+  },
+  "timestamp": 1673266869,
+  "project_id": null
+}

src/entities/ray/ui/preview-card/preview-card.stories.ts

@@ -20,6 +20,8 @@ import {
   rayTextMock,
   rayTraceMock,
   rayLockMock,
+  rayBooleanTrueMock,
+  rayBooleanFalseMock
 } from '../../mocks';
 import {
   rayLaravelEloquentMock, rayLaravelEventsMock, rayLaravelJobsMock,
@@ -35,6 +37,14 @@ export default {
   component: PreviewCard
 } as Meta<typeof PreviewCard>;
 
+export const BooleanTrue: StoryObj<typeof PreviewCard> = {
+  args: { event: normalizeRayEvent(rayBooleanTrueMock), }
+};
+
+export const BooleanFalse: StoryObj<typeof PreviewCard> = {
+  args: { event: normalizeRayEvent(rayBooleanFalseMock), }
+};
+
 export const Text: StoryObj<typeof PreviewCard> = {
   args: { event: normalizeRayEvent(rayTextMock), }
 };

src/entities/ray/ui/ray-custom/ray-custom.vue

@@ -11,12 +11,6 @@ defineProps<Props>();
 
 <template>
   <div class="ray-custom">
-    <ValueDump v-if="content.content" :value="content.content" />
+    <ValueDump :value="content.content" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.ray-custom {
-  @apply py-3;
-}
-</style>

src/entities/ray/ui/ray-exception/ray-exception.vue

@@ -32,22 +32,24 @@ defineProps<Props>();
 </template>
 
 <style lang="scss" scoped>
+@import "assets/mixins";
 .ray-exception {
-  display: block;
+  @apply block;
 }
 
 .ray-exception__texts {
-  display: block;
+  @apply block;
 }
 
-.ray-exception__texts-in {
-  @apply mb-1;
-}
 .ray-exception__texts-code {
-  @apply font-semibold;
+  @apply block mb-2;
+  @apply text-xs sm:text-sm md:text-base font-semibold;
 }
 
 .ray-exception__text {
-  display: block;
+  @include code-example();
+  @apply mb-2;
+  @apply text-xs break-words whitespace-pre-wrap overflow-auto text-opacity-60;
 }
+
 </style>