Initial working version with minor bugs

static/css/base.css

@@ -1,3 +1,9 @@
+/* Helper classes
+-------------------------------------------------- */
+.min-width-fit-content {
+  min-width: fit-content;
+}
+
 /* Sticky footer styles
 -------------------------------------------------- */
 html {
@@ -31,3 +37,148 @@ body {
   line-height: 60px; /* Vertically center the text there */
   background-color: #f5f5f5;
 }
+/* Trade Offer
+-------------------------------------------------- */
+.trade-offer-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.trade-offer-cell {
+  display: flex;
+  flex-direction: column;
+}
+
+.trade-offer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.trade-offer-header .avatar {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.trade-offer-cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.5rem;
+}
+
+.bg-trade-offer {
+  background: linear-gradient(to right, var(--bs-gray-400) 50%, var(--bs-white) 50%);
+}
+
+/* Card Badge
+-------------------------------------------------- */
+span:has(> .card-badge-grid) {
+    display: block;
+}
+
+.card-badge-grid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr 1fr;
+  gap: 0.2rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.9rem;
+  min-width: 150px;
+}
+
+.card-badge-name {
+  grid-column: 1 / span 2;
+  grid-row: 1;  
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-badge-rarity {
+  grid-column: 1;
+  grid-row: 2;
+  text-align: left;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  line-height: 1.2;
+}
+
+.card-badge-cardset {
+  grid-column: 2;
+  grid-row: 2;
+  text-align: right;
+  font-size: 0.75rem;
+  opacity: 0.9;
+}
+
+/* Responsive: On narrow viewports, stack the Has and Wants sections */
+@media (max-width: 576px) {
+  .trade-offer-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Fix for the remove item button */
+button.select2-selection__choice__remove {
+  height: 100%;
+}
+
+/* Trade Offer Card Body with Vertical Separator
+-------------------------------------------------- */
+.trade-offer-body {
+  position: relative;              /* Required for the absolute separator */
+  background-color: var(--bs-white); /* Use a single background color */
+}
+
+.trade-offer-body::before {
+  content: "";
+  position: absolute;
+  left: 50%;                      /* Centered horizontally */
+  transform: translateX(-50%);
+  top: 1rem;                      /* Gap from the top */
+  bottom: 1rem;                   /* Gap from the bottom */
+  width: 1px;                     /* The thickness of the separator */
+  background-color: var(--bs-gray-300); /* Color for the separator */
+  z-index: 1;
+}
+
+/* Modified slider wrapper to allow space for left/right shadows */
+.tab-slider-wrapper {
+    overflow: hidden;
+    /* increase the total width to include extra shadow space */
+    width: calc(100% + 40px);
+    /* negative margins pull the container outward */
+    margin: 0 -20px;
+    /* add horizontal padding to preserve layout inside */
+    padding: 0 20px;
+}
+
+/* Grid-based slider for tab content */
+.tab-content {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 100%;
+    gap: 80px; /* Add gap between columns */
+    transition: transform 0.5s ease;
+    position: relative;
+    will-change: transform; /* Optional: Helps with smoother animations */
+}
+
+.tab-pane {
+    width: 100%;
+    display: block !important;
+    position: relative;
+    opacity: 1;
+}