fix: code input design

Related: #17 (closed)

bin/frontend/controls/CouponCodeInput.css

-div + .quiqqer-coupons-field {
-    margin-left: 20px;
-}
-
 .quiqqer-coupons-couponcodeinput {
-    background: rgba(0, 0, 0, 0.05);
-    display: flex;
-    padding: 5px;
+    container-type: inline-size;
 }
 
-.quiqqer-coupons-couponcodeinput-input {
-    min-width: 220px;
+:where(.quiqqer-coupons-couponcodeinput label) {
+    display: block;
+    margin-bottom: 0.25em;
 }
 
-.quiqqer-coupons-couponcodeinput-title,
-.quiqqer-coupons-couponcodeinput-input {
-    margin-right: 1rem;
+.quiqqer-coupons-couponcodeinput__inputGroup {
+    display: inline-grid;
+    grid-template-columns: 1fr auto;
+    gap: 1rem;
 }
 
-.quiqqer-coupons-couponcodeinput input {
-    line-height: 36px;
-    margin-right: 1rem;
+.quiqqer-coupons-couponcodeinput-input {
+    min-width: min(250px, 100cqi);
 }
 
 .quiqqer-coupons-remove {
     margin-left: 1rem;
 }
 
-.quiqqer-coupons-remove .fa {
-    margin-right: 0;
-}
-
 /**
  * Simple Checkout
  */
-
 .quiqqer-coupons-field-simpleCheckout {
-    margin-top: 20px;
-    margin-left: 0 !important;
+    margin-top: 1rem;
 }
 
 .quiqqer-coupons-field-simpleCheckout .quiqqer-coupons-couponcodeinput {
     background: var(--_sectionBgColor);
-    display: flex;
     padding: var(--_sectionPadding);
 }
 
-.quiqqer-coupons-field-simpleCheckout .quiqqer-coupons-couponcodeinput label {
-    flex-grow: 1;
+.quiqqer-coupons-field-simpleCheckout .quiqqer-coupons-couponcodeinput__inputGroup {
+    width: 100%;
+}
+
+/*****************************/
+/* media / container queries */
+/*****************************/
+@media screen and (max-width: 767px) {
+    .quiqqer-coupons-couponcodeinput__inputGroup {
+        width: 100%;
+    }
 }
 
-.quiqqer-coupons-field-simpleCheckout .quiqqer-coupons-couponcodeinput-input {
-    width: calc(100% - 1rem);
+@container (max-inline-size: 400px) {
+    .quiqqer-coupons-couponcodeinput__inputGroup {
+        grid-template-columns: 1fr;
+    }
 }
\ No newline at end of file