fix new tactic panel

front/assets/court/court.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      version="1.1"
-     width="100%"
+     width="100"
-     height="100%"
+     height="50"
      viewBox="7.5 18.5 85.5 56"
      style="enable-background:new 7.5 18.5 85.5 56;"
      xml:space="preserve">

front/assets/court/half_court.svg

@@ -1,4 +1,4 @@
-<svg width="80" height="58" viewBox="0 0 80 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100" height="50" viewBox="0 0 80 58" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.74466 0.676824V28.6768V56.6768L76.7447 56.6768V28.6768V0.676824L2.74466 0.676824Z" stroke="black" stroke-miterlimit="10"/>
 <path d="M76.8393 0.876801L3.21608 0.876801" stroke="black" stroke-miterlimit="10"/>
 <path d="M12.0393 56.8768V47.2768C12.0393 33.8101 24.6232 23.0101 39.9554 23.0101C55.2875 23.0101 67.8715 33.9435 67.8715 47.2768V56.8768" stroke="black" stroke-miterlimit="10"/>

front/style/basket_court.css

@@ -9,7 +9,7 @@
 }
 
 #court-svg {
-    margin: 35px;
+    margin: 35px 0 35px 0;
     height: 87%;
     user-select: none;
     -webkit-user-drag: none;

front/style/new_tactic_panel.css

@@ -27,7 +27,7 @@
 
 #panel-buttons {
     width: 75%;
-    height: 30%;
+    height: 20%;
     display: flex;
     justify-content: space-evenly;
     align-items: stretch;
@@ -45,17 +45,15 @@
 
     cursor: pointer;
 
-    transition: scale 1s;
+    transition: scale 0.5s ease-out;
+    width: auto;
 }
 
 .court-kind-button-bottom,
 .court-kind-button-top {
-    width: 100%;
-    height: 100%;
     border: solid;
     border-color: var(--border-color);
 }
-
 .court-kind-button-bottom {
     display: flex;
     justify-content: center;
@@ -63,14 +61,15 @@
     align-content: center;
 
     height: 25%;
+    width: 100%;
+
     background-color: var(--editor-court-selection-buttons);
     border-radius: 0 0 20px 20px;
     border-width: 3px;
 }
 
 .court-kind-button-top {
-    height: 75%;
+    height: 30%;
-    overflow: hidden;
     background-color: var(--main-color);
     border-radius: 20px 20px 0 0;
     border-width: 3px 3px 0 3px;
@@ -82,21 +81,25 @@
 
 .court-kind-button-top,
 .court-kind-button-image-div {
+    overflow: hidden;
     display: flex;
+    height: 100%;
+    width: 100%;
     justify-content: center;
-    align-items: stretch;
+    align-items: center;
-    align-content: stretch;
+    align-content: center;
 }
 
 .court-kind-button-image {
     height: 100%;
+    width: 150px;
     user-select: none;
     -webkit-user-drag: none;
 }
 
 .court-kind-button-image-div {
-    width: 100%;
     height: 100%;
+
     padding: 0 10px 0 10px;
     background-color: var(--second-color);
 }

front/views/NewTacticPanel.tsx

@@ -56,7 +56,7 @@ function CourtKindButton({
                 </div>
             </div>
             <div className="court-kind-button-bottom">
-                <p className={"court-kind-button-name"}>{name}</p>
+                <p className="court-kind-button-name">{name}</p>
             </div>
         </div>
     )