From 1800c20742f648371be6629687427b841ab36bf9 Mon Sep 17 00:00:00 2001
From: Lukas Schaab <lukas.schaab@lukaio.de>
Date: Mon, 27 Jan 2025 14:38:52 +0100
Subject: [PATCH] fixed styling issues in avatar editor

---
 .../Core/Presentation/AvatarEditor/AvatarEditor.tsx          | 2 +-
 .../AvatarEditorPreviewCameraController.ts                   | 5 +++++
 .../React/GeneralComponents/ColorPicker/ColorPickerModal.tsx | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Components/Core/Presentation/AvatarEditor/AvatarEditor.tsx b/src/Components/Core/Presentation/AvatarEditor/AvatarEditor.tsx
index c050f661c..a5eff3559 100644
--- a/src/Components/Core/Presentation/AvatarEditor/AvatarEditor.tsx
+++ b/src/Components/Core/Presentation/AvatarEditor/AvatarEditor.tsx
@@ -49,7 +49,7 @@ export default function AvatarEditor() {
       />
       <div className="grid grid-cols-2 grid-rows-1 portrait:grid-cols-1 portrait:grid-rows-3 grow lg:rounded-lg">
         {/* Categories (Left Side) */}
-        <div className="flex flex-col portrait:h-full portrait:order-2">
+        <div className="flex flex-col portrait:order-2 portrait:row-span-2">
           {/* Category Tabs */}
           {/* Category Header */}
           <div className="flex flex-row items-center justify-center">
diff --git a/src/Components/Core/Presentation/AvatarEditor/AvatarEditorPreview/AvatarEditorPreviewCamera/AvatarEditorPreviewCameraController.ts b/src/Components/Core/Presentation/AvatarEditor/AvatarEditorPreview/AvatarEditorPreviewCamera/AvatarEditorPreviewCameraController.ts
index 658a08092..766c0828f 100644
--- a/src/Components/Core/Presentation/AvatarEditor/AvatarEditorPreview/AvatarEditorPreviewCamera/AvatarEditorPreviewCameraController.ts
+++ b/src/Components/Core/Presentation/AvatarEditor/AvatarEditorPreview/AvatarEditorPreviewCamera/AvatarEditorPreviewCameraController.ts
@@ -15,6 +15,11 @@ export default class AvatarEditorPreviewCameraController
     // attach controls
     camera.inputs.attached.mousewheel.attachControl();
     camera.inputs.attached.pointers.attachControl();
+
+    // Empfindlichkeit für Pinch/Zoom verringern
+    camera.pinchPrecision = 200; // höherer Wert = geringeres Zoom pro Geste
+    // oder: camera.pinchDeltaPercentage = 0.002; // anpassen nach Bedarf
+
     const pointersInput = camera.inputs.attached
       .pointers as ArcRotateCameraPointersInput;
     pointersInput.multiTouchPanAndZoom = true;
diff --git a/src/Components/Core/Presentation/React/GeneralComponents/ColorPicker/ColorPickerModal.tsx b/src/Components/Core/Presentation/React/GeneralComponents/ColorPicker/ColorPickerModal.tsx
index 7a39f1c9d..ab54dd68c 100644
--- a/src/Components/Core/Presentation/React/GeneralComponents/ColorPicker/ColorPickerModal.tsx
+++ b/src/Components/Core/Presentation/React/GeneralComponents/ColorPicker/ColorPickerModal.tsx
@@ -23,7 +23,7 @@ export default function ColorPickerModal({
 }: AdLerUIComponent<Props>) {
   if (!showModal) return null;
   return (
-    <div className="fixed top-0 bottom-0 left-0 right-0 z-10 flex items-center justify-center h-full bg-blacktrans">
+    <div className="fixed top-0 bottom-0 left-0 right-0 z-20 flex items-center justify-center h-full bg-blacktrans">
       <div className="flex items-center justify-center w-full h-full portrait:flex-col">
         <div className=" z-50 p-4 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto max-w-[95%] max-h-[95%] overflow-hidden flex flex-col text-adlerdarkblue">
           <h1 className="text-2xl font-bold">{title}</h1>