Fancy TT Shop panel

public/stylesheets/styles.css

@@ -317,6 +317,7 @@ button:focus {
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
+  transition: all 0.25s ease-out;
 }
 
 .ttbuttons-top-row {
@@ -454,7 +455,8 @@ button:focus {
   font-size: 2.1rem;
   width: 2.5rem;
   height: 2.5rem;
-  margin-left: -0.2rem
+  margin-left: -0.2rem;
+  cursor: pointer;
 }
 
 .t-s6 .ttshop-minimize-btn,
@@ -468,10 +470,6 @@ button:focus {
   color: #3AACD6;
 }
 
-.ttshop-minimize-btn span {
-  transition: all 0.25s ease-out;
-}
-
 .c-ttshop__save-load-text {
   font-size: 10px;
 }
@@ -496,7 +494,7 @@ button:focus {
   transition-duration: 0.2s;
   border-radius: 0.4rem;
   font-size: 1.65rem;
-  position:relative;
+  position: relative;
 }
 
 /*#region tab buttons*/

src/components/tabs/time-studies/tt-shop/TimeTheoremShop.vue

@@ -63,12 +63,18 @@ export default {
     },
     minimizeArrowStyle() {
       return {
-        transform: this.minimized ? "rotateX(180deg)" : "",
+        transform: this.minimized ? "rotate(-180deg)" : "",
+        transition: "all 0.25s ease-out"
       };
     },
     saveLoadText() {
       return this.$viewModel.shiftDown ? "Save:" : "Load:";
     },
+    shopBottomRowHeightStyle() {
+      return {
+        height: this.hasTTAutobuyer ? "6.7rem" : "4.4rem",
+      };
+    }
   },
   watch: {
     isAutobuyerOn(newValue) {
@@ -166,6 +172,7 @@ export default {
       <div
         v-if="!minimized"
         class="ttbuttons-row"
+        :style="shopBottomRowHeightStyle"
       >
         <TimeTheoremBuyButton
           :budget="budget.am"
@@ -201,6 +208,10 @@ export default {
           />
         </div>
       </div>
+      <div
+        v-else
+        class="ttbuttons-row ttbuttons-bottom-row-hide"
+      />
     </div>
     <button
       v-if="minimizeAvailable"
@@ -227,4 +238,8 @@ export default {
   flex-direction: row;
   align-items: center;
 }
+
+.ttbuttons-bottom-row-hide {
+  height: 0rem;
+}
 </style>