added viewport config

src/app/layout.tsx

@@ -7,6 +7,7 @@ import meta from '@/app/meta.json';
 import { merge } from 'lodash';
 import Footer from "./modules/components/Footer";
 import Header from "./modules/components/Header";
+import type { Viewport } from 'next'
 
 export const generateMetadata = async (): Promise<Metadata | undefined> => {
     const headersList = headers();
@@ -18,6 +19,13 @@ export const generateMetadata = async (): Promise<Metadata | undefined> => {
     return merge({}, base, extend) as Metadata;
 }
 
+export const viewport: Viewport = {
+    width: 'device-width',
+    initialScale: 0.9,
+    maximumScale: 0.9,
+    userScalable: false
+}
+
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
         <CookiesProvider>

src/app/modules/components/SkinView.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useRef } from 'react';
+import { CSSProperties, useEffect, useRef } from 'react';
 import { PlayerAnimation, PlayerObject, SkinViewer, WalkingAnimation } from 'skinview3d';
 
 
 interface SkinView3DOptions {
     SKIN: string,
     CAPE: string,
     className: string,
+    style?: CSSProperties,
     slim: boolean,
     id: string,
     width?: number,
@@ -28,7 +29,7 @@ export class TPose extends PlayerAnimation {
 }
 
 
-const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, background }: SkinView3DOptions): JSX.Element => {
+const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, background, style }: SkinView3DOptions): JSX.Element => {
     const canvasRef = useRef<HTMLCanvasElement>();
     const skinViewRef = useRef<SkinViewer>();
 
@@ -69,7 +70,7 @@ const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, back
         skinViewRef.current.camera.position.z = 15;
 
         skinViewRef.current.scene.position.y = -2.5;
-        skinViewRef.current.loadBackground(background || "/static/background.png");
+        background && skinViewRef.current.loadBackground(background);
 
         skinViewRef.current.loadSkin(SKIN ? SKIN : "/static/workshop_base.png", { model: slim ? "slim" : "default" });
         CAPE && skinViewRef.current.loadSkin(CAPE);
@@ -97,7 +98,7 @@ const SkinView3D = ({ SKIN, CAPE, className, slim, id, width, height, pose, back
     }, [pose]);
 
     return (
-        <div id={id} className={className}>
+        <div id={id} className={className} style={style}>
             <canvas ref={canvasRef} />
         </div>
     )