Update responsive styles for tablet and mobile devices

totocalcio · totocalcio · commit 552de11ac50d · 2024-10-16T22:59:28.000+09:00
diff --git a/apps/web/app/components/event/PanelerList.vue b/apps/web/app/components/event/PanelerList.vue
@@ -39,7 +39,7 @@ const currentLocale = useLocaleCurrent().locale
   gap: calc(var(--unit) * 2);
   padding: calc(var(--unit) * 5) calc(var(--unit) * 12) calc(var(--unit) * 5);
 
-  @media (--mobile) {
+  @media (--tablet) {
     gap: calc(var(--unit) * 1);
     padding: calc(var(--unit) * 2);
   }
@@ -62,4 +62,11 @@ const currentLocale = useLocaleCurrent().locale
     --head-img-width: 103px;
   }
 }
+
+@media (width <= 768px) {
+  ::v-deep(.speaker-name) {
+    font-size: 0.875rem;
+    letter-spacing: 0.4px;
+  }
+}
 </style>

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ const currentLocale = useLocaleCurrent().locale`
`39`	`39`	`gap: calc(var(--unit) * 2);`
`40`	`40`	`padding: calc(var(--unit) * 5) calc(var(--unit) * 12) calc(var(--unit) * 5);`
`41`	`41`
`42`		`- @media (--mobile) {`
	`42`	`+ @media (--tablet) {`
`43`	`43`	`gap: calc(var(--unit) * 1);`
`44`	`44`	`padding: calc(var(--unit) * 2);`
`45`	`45`	`}`
`@@ -62,4 +62,11 @@ const currentLocale = useLocaleCurrent().locale`
`62`	`62`	`--head-img-width: 103px;`
`63`	`63`	`}`
`64`	`64`	`}`
	`65`	`+`
	`66`	`+@media (width <= 768px) {`
	`67`	`+ ::v-deep(.speaker-name) {`
	`68`	`+ font-size: 0.875rem;`
	`69`	`+ letter-spacing: 0.4px;`
	`70`	`+ }`
	`71`	`+}`
`65`	`72`	`</style>`