ok

src/components/ItemType.module.css

@@ -1,7 +1,7 @@
 .item-type {
   width: auto;
   height: auto;
-  margin: 0 4px; /* tighter spacing between tiles */
+  margin: 0 6px;
   overflow: visible;
   text-align: center;
   align-items: center;
@@ -10,64 +10,107 @@
   justify-content: center;
   position: relative;
 }
-.item-type-rectangular {
-  width: calc(25vw - 20px);
-  height: calc(25vw - 20px);
-  overflow: visible;
-  text-align: center;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  position: relative; /* Ensure absolute positioning inside works */
+
+/* Compact version of item-type */
+.item-type-compact {
+  margin: 0 4px;
 }
-.item-type-nomargin {
-  width: calc(25vw - 20px);
-  height: calc(39vw - 20px);
+
+.item-type-rectangular {
+  width: calc(30vw - 24px);
+  height: calc(30vw - 24px);
   overflow: visible;
   text-align: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: relative; /* Ensure absolute positioning inside works */
+  position: relative;
 }
+
+.item-type-nomargin {
+  width: calc(30vw - 24px);
+  height: calc(45vw - 24px);
+  overflow: visible;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
 .item-type-rect {
   position: relative;
-  height: clamp(48px, 9vw, 80px);
-  width: clamp(48px, 9vw, 80px);
+  height: 48px; /* Fixed height for better touch targets */
+  min-width: 100px; /* Minimum width */
+  padding: 0 20px; /* Horizontal padding */
   object-fit: cover;
-  border-radius: 12px;
+  border-radius: 12px; /* Square rounded corners */
   background-color: #fff;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s ease;
+  border: 1px solid #e6e6e6;
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  color: #2d2d2d;
+  cursor: pointer;
+}
+
+/* Compact version of item-type-rect */
+.item-type-rect-compact {
+  height: 42px; /* Slightly smaller for compact version */
+  min-width: 90px;
+  padding: 0 18px;
+  border-radius: 10px;
+  font-size: 14px;
 }
 
 .item-type-rect:hover {
   background-color: var(--brand-sage-100, #E9F3ED);
   border-color: var(--brand-sage, #6B8F71);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+.item-type-rect.selected {
+  background-color: var(--brand-sage, #6B8F71);
+  color: #ffffff;
+  border-color: var(--brand-sage, #6B8F71);
+  box-shadow: 0 2px 6px rgba(107, 143, 113, 0.2);
 }
 
 .item-type-name {
   font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 12px;
-  color: #333;
+  font-size: 16px;
+  color: #2d2d2d;
   width: auto;
   text-align: center;
   background-color: transparent;
   position: relative;
-  margin-top: 6px; /* keep label spacing constant; avoid jumping */
+  margin-top: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+}
+
+/* Compact version of item-type-name */
+.item-type-name-compact {
+  font-size: 14px;
+  max-width: 140px;
 }
 
 .item-type-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 15px;
+  border-radius: 12px;
 }
 
 .item-type-image-container {
@@ -77,6 +120,7 @@
   width: 100%;
   height: 100%;
 }
+
 .item-type-image-input {
   opacity: 0;
   position: absolute;
@@ -88,12 +132,12 @@
 
 .item-type-create {
   position: absolute;
-  top: 76%; /* Position below the input */
+  top: 76%;
   left: 50%;
   transform: translateX(-50%);
-  margin-top: 10px; /* Space between input and button */
-  width: 20vw;
-  text-align: center; /* Center button text */
+  margin-top: 12px;
+  width: 24vw;
+  text-align: center;
 }
 
 .border {
@@ -103,3 +147,17 @@
 .noborder {
   border: 1px solid #ffffff00;
 }
+
+/* No icon styles */
+.no-icon {
+  height: 48px;
+  min-width: 100px;
+  padding: 0 20px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: "Plus Jakarta Sans", sans-serif;
+}