fix(web): change invalid kebab-case CSS-in-JS property names to PascalCase (vspo-lab#670)

Author: sruenwg

service/vspo-schedule/web/src/components/Elements/Modal/VideoModal.tsx

@@ -416,8 +416,8 @@ export const VideoModal: React.FC = () => {
           variant="body1"
           sx={{
             display: "-webkit-box",
-            "-webkit-line-clamp": "2",
-            "-webkit-box-orient": "vertical",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
             overflow: "hidden",
             textOverflow: "ellipsis",
             width: "80%", // 適宜調整してください

service/vspo-schedule/web/src/components/Templates/RelatedVideos.tsx

@@ -56,15 +56,15 @@ const StyledCardContent = styled(CardContent)({
 
 const StyledTitle = styled(Typography)({
   display: "-webkit-box",
-  "-webkit-line-clamp": "2",
-  "-webkit-box-orient": "vertical",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
   overflow: "hidden",
 });
 
 const StyledChannelTitle = styled(Typography)({
   display: "-webkit-box",
-  "-webkit-line-clamp": "1",
-  "-webkit-box-orient": "vertical",
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: "vertical",
   overflow: "hidden",
 });