responsive controlled first commit

presets.js

@@ -189,6 +189,7 @@ module.exports = {
 
           spacing: {
               'modal': '610px',
+              '500':   '500px',
               '5.5':   '1.30rem', 
               '9.5':   '2.45rem',
               '12.5':  '3.2rem',

public/css/app.css

@@ -1994,6 +1994,12 @@ button, input, optgroup, select, textarea{
   bottom: 24rem;
   left: 24rem;
 }
+.inset-500{
+  top: 500px;
+  right: 500px;
+  bottom: 500px;
+  left: 500px;
+}
 .inset-auto{
   top: auto;
   right: auto;
@@ -2270,6 +2276,12 @@ button, input, optgroup, select, textarea{
   bottom: -24rem;
   left: -24rem;
 }
+.-inset-500{
+  top: -500px;
+  right: -500px;
+  bottom: -500px;
+  left: -500px;
+}
 .-inset-px{
   top: -1px;
   right: -1px;
@@ -2472,6 +2484,10 @@ button, input, optgroup, select, textarea{
   left: 24rem;
   right: 24rem;
 }
+.inset-x-500{
+  left: 500px;
+  right: 500px;
+}
 .inset-x-auto{
   left: auto;
   right: auto;
@@ -2656,6 +2672,10 @@ button, input, optgroup, select, textarea{
   left: -24rem;
   right: -24rem;
 }
+.-inset-x-500{
+  left: -500px;
+  right: -500px;
+}
 .-inset-x-px{
   left: -1px;
   right: -1px;
@@ -2836,6 +2856,10 @@ button, input, optgroup, select, textarea{
   top: 24rem;
   bottom: 24rem;
 }
+.inset-y-500{
+  top: 500px;
+  bottom: 500px;
+}
 .inset-y-auto{
   top: auto;
   bottom: auto;
@@ -3020,6 +3044,10 @@ button, input, optgroup, select, textarea{
   top: -24rem;
   bottom: -24rem;
 }
+.-inset-y-500{
+  top: -500px;
+  bottom: -500px;
+}
 .-inset-y-px{
   top: -1px;
   bottom: -1px;
@@ -3170,6 +3198,9 @@ button, input, optgroup, select, textarea{
 .top-96{
   top: 24rem;
 }
+.top-500{
+  top: 500px;
+}
 .top-auto{
   top: auto;
 }
@@ -3308,6 +3339,9 @@ button, input, optgroup, select, textarea{
 .-top-96{
   top: -24rem;
 }
+.-top-500{
+  top: -500px;
+}
 .-top-px{
   top: -1px;
 }
@@ -3443,6 +3477,9 @@ button, input, optgroup, select, textarea{
 .right-96{
   right: 24rem;
 }
+.right-500{
+  right: 500px;
+}
 .right-auto{
   right: auto;
 }
@@ -3599,6 +3636,9 @@ button, input, optgroup, select, textarea{
 .-right-96{
   right: -24rem;
 }
+.-right-500{
+  right: -500px;
+}
 .-right-px{
   right: -1px;
 }
@@ -3734,6 +3774,9 @@ button, input, optgroup, select, textarea{
 .bottom-96{
   bottom: 24rem;
 }
+.bottom-500{
+  bottom: 500px;
+}
 .bottom-auto{
   bottom: auto;
 }
@@ -3872,6 +3915,9 @@ button, input, optgroup, select, textarea{
 .-bottom-96{
   bottom: -24rem;
 }
+.-bottom-500{
+  bottom: -500px;
+}
 .-bottom-px{
   bottom: -1px;
 }
@@ -4007,6 +4053,9 @@ button, input, optgroup, select, textarea{
 .left-96{
   left: 24rem;
 }
+.left-500{
+  left: 500px;
+}
 .left-auto{
   left: auto;
 }
@@ -4163,6 +4212,9 @@ button, input, optgroup, select, textarea{
 .-left-96{
   left: -24rem;
 }
+.-left-500{
+  left: -500px;
+}
 .-left-px{
   left: -1px;
 }
@@ -4718,6 +4770,9 @@ button, input, optgroup, select, textarea{
 .m-96{
   margin: 24rem;
 }
+.m-500{
+  margin: 500px;
+}
 .m-auto{
   margin: auto;
 }
@@ -4856,6 +4911,9 @@ button, input, optgroup, select, textarea{
 .-m-96{
   margin: -24rem;
 }
+.-m-500{
+  margin: -500px;
+}
 .-m-px{
   margin: -1px;
 }
@@ -5025,6 +5083,10 @@ button, input, optgroup, select, textarea{
   margin-left: 24rem;
   margin-right: 24rem;
 }
+.mx-500{
+  margin-left: 500px;
+  margin-right: 500px;
+}
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
@@ -5209,6 +5271,10 @@ button, input, optgroup, select, textarea{
   margin-left: -24rem;
   margin-right: -24rem;
 }
+.-mx-500{
+  margin-left: -500px;
+  margin-right: -500px;
+}
 .-mx-px{
   margin-left: -1px;
   margin-right: -1px;
@@ -5389,6 +5455,10 @@ button, input, optgroup, select, textarea{
   margin-top: 24rem;
   margin-bottom: 24rem;
 }
+.my-500{
+  margin-top: 500px;
+  margin-bottom: 500px;
+}
 .my-auto{
   margin-top: auto;
   margin-bottom: auto;
@@ -5573,6 +5643,10 @@ button, input, optgroup, select, textarea{
   margin-top: -24rem;
   margin-bottom: -24rem;
 }
+.-my-500{
+  margin-top: -500px;
+  margin-bottom: -500px;
+}
 .-my-px{
   margin-top: -1px;
   margin-bottom: -1px;
@@ -5719,6 +5793,9 @@ button, input, optgroup, select, textarea{
 .mt-96{
   margin-top: 24rem;
 }
+.mt-500{
+  margin-top: 500px;
+}
 .mt-auto{
   margin-top: auto;
 }
@@ -5857,6 +5934,9 @@ button, input, optgroup, select, textarea{
 .-mt-96{
   margin-top: -24rem;
 }
+.-mt-500{
+  margin-top: -500px;
+}
 .-mt-px{
   margin-top: -1px;
 }
@@ -5992,6 +6072,9 @@ button, input, optgroup, select, textarea{
 .mr-96{
   margin-right: 24rem;
 }
+.mr-500{
+  margin-right: 500px;
+}
 .mr-auto{
   margin-right: auto;
 }
@@ -6130,6 +6213,9 @@ button, input, optgroup, select, textarea{
 .-mr-96{
   margin-right: -24rem;
 }
+.-mr-500{
+  margin-right: -500px;
+}
 .-mr-px{
   margin-right: -1px;
 }
@@ -6265,6 +6351,9 @@ button, input, optgroup, select, textarea{
 .mb-96{
   margin-bottom: 24rem;
 }
+.mb-500{
+  margin-bottom: 500px;
+}
 .mb-auto{
   margin-bottom: auto;
 }
@@ -6403,6 +6492,9 @@ button, input, optgroup, select, textarea{
 .-mb-96{
   margin-bottom: -24rem;
 }
+.-mb-500{
+  margin-bottom: -500px;
+}
 .-mb-px{
   margin-bottom: -1px;
 }
@@ -6538,6 +6630,9 @@ button, input, optgroup, select, textarea{
 .ml-96{
   margin-left: 24rem;
 }
+.ml-500{
+  margin-left: 500px;
+}
 .ml-auto{
   margin-left: auto;
 }
@@ -6676,6 +6771,9 @@ button, input, optgroup, select, textarea{
 .-ml-96{
   margin-left: -24rem;
 }
+.-ml-500{
+  margin-left: -500px;
+}
 .-ml-px{
   margin-left: -1px;
 }
@@ -6907,6 +7005,9 @@ button, input, optgroup, select, textarea{
 .h-96{
   height: 24rem;
 }
+.h-500{
+  height: 500px;
+}
 .h-auto{
   height: auto;
 }
@@ -7066,6 +7167,9 @@ button, input, optgroup, select, textarea{
 .max-h-96{
   max-height: 24rem;
 }
+.max-h-500{
+  max-height: 500px;
+}
 .max-h-px{
   max-height: 1px;
 }
@@ -7243,6 +7347,9 @@ button, input, optgroup, select, textarea{
 .w-96{
   width: 24rem;
 }
+.w-500{
+  width: 500px;
+}
 .w-auto{
   width: auto;
 }
@@ -7630,6 +7737,10 @@ button, input, optgroup, select, textarea{
   -ms-flex-preferred-size: 24rem;
       flex-basis: 24rem;
 }
+.basis-500{
+  -ms-flex-preferred-size: 500px;
+      flex-basis: 500px;
+}
 .basis-auto{
   -ms-flex-preferred-size: auto;
       flex-basis: auto;
@@ -7860,6 +7971,11 @@ button, input, optgroup, select, textarea{
   --tw-border-spacing-y: 24rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
+.border-spacing-500{
+  --tw-border-spacing-x: 500px;
+  --tw-border-spacing-y: 500px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .border-spacing-px{
   --tw-border-spacing-x: 1px;
   --tw-border-spacing-y: 1px;
@@ -8046,6 +8162,10 @@ button, input, optgroup, select, textarea{
   --tw-border-spacing-x: 24rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
+.border-spacing-x-500{
+  --tw-border-spacing-x: 500px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .border-spacing-x-px{
   --tw-border-spacing-x: 1px;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
@@ -8222,6 +8342,10 @@ button, input, optgroup, select, textarea{
   --tw-border-spacing-y: 24rem;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
+.border-spacing-y-500{
+  --tw-border-spacing-y: 500px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .border-spacing-y-px{
   --tw-border-spacing-y: 1px;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
@@ -8468,6 +8592,11 @@ button, input, optgroup, select, textarea{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-x-500{
+  --tw-translate-x: 500px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-px{
   --tw-translate-x: 1px;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -8693,6 +8822,11 @@ button, input, optgroup, select, textarea{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-translate-x-500{
+  --tw-translate-x: -500px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-x-px{
   --tw-translate-x: -1px;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -8918,6 +9052,11 @@ button, input, optgroup, select, textarea{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-y-500{
+  --tw-translate-y: 500px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-y-px{
   --tw-translate-y: 1px;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -9143,6 +9282,11 @@ button, input, optgroup, select, textarea{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-translate-y-500{
+  --tw-translate-y: -500px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-y-px{
   --tw-translate-y: -1px;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -10437,6 +10581,9 @@ button, input, optgroup, select, textarea{
 .scroll-m-96{
   scroll-margin: 24rem;
 }
+.scroll-m-500{
+  scroll-margin: 500px;
+}
 .scroll-m-px{
   scroll-margin: 1px;
 }
@@ -10569,6 +10716,9 @@ button, input, optgroup, select, textarea{
 .-scroll-m-96{
   scroll-margin: -24rem;
 }
+.-scroll-m-500{
+  scroll-margin: -500px;
+}
 .-scroll-m-px{
   scroll-margin: -1px;
 }
@@ -10735,6 +10885,10 @@ button, input, optgroup, select, textarea{
   scroll-margin-left: 24rem;
   scroll-margin-right: 24rem;
 }
+.scroll-mx-500{
+  scroll-margin-left: 500px;
+  scroll-margin-right: 500px;
+}
 .scroll-mx-px{
   scroll-margin-left: 1px;
   scroll-margin-right: 1px;
@@ -10911,6 +11065,10 @@ button, input, optgroup, select, textarea{
   scroll-margin-left: -24rem;
   scroll-margin-right: -24rem;
 }
+.-scroll-mx-500{
+  scroll-margin-left: -500px;
+  scroll-margin-right: -500px;
+}
 .-scroll-mx-px{
   scroll-margin-left: -1px;
   scroll-margin-right: -1px;
@@ -11087,6 +11245,10 @@ button, input, optgroup, select, textarea{
   scroll-margin-top: 24rem;
   scroll-margin-bottom: 24rem;
 }
+.scroll-my-500{
+  scroll-margin-top: 500px;
+  scroll-margin-bottom: 500px;
+}
 .scroll-my-px{
   scroll-margin-top: 1px;
   scroll-margin-bottom: 1px;
@@ -11263,6 +11425,10 @@ button, input, optgroup, select, textarea{
   scroll-margin-top: -24rem;
   scroll-margin-bottom: -24rem;
 }
+.-scroll-my-500{
+  scroll-margin-top: -500px;
+  scroll-margin-bottom: -500px;
+}
 .-scroll-my-px{
   scroll-margin-top: -1px;
   scroll-margin-bottom: -1px;
@@ -11405,6 +11571,9 @@ button, input, optgroup, select, textarea{
 .scroll-mt-96{
   scroll-margin-top: 24rem;
 }
+.scroll-mt-500{
+  scroll-margin-top: 500px;
+}
 .scroll-mt-px{
   scroll-margin-top: 1px;
 }
@@ -11537,6 +11706,9 @@ button, input, optgroup, select, textarea{
 .-scroll-mt-96{
   scroll-margin-top: -24rem;
 }
+.-scroll-mt-500{
+  scroll-margin-top: -500px;
+}
 .-scroll-mt-px{
   scroll-margin-top: -1px;
 }
@@ -11669,6 +11841,9 @@ button, input, optgroup, select, textarea{
 .scroll-mr-96{
   scroll-margin-right: 24rem;
 }
+.scroll-mr-500{
+  scroll-margin-right: 500px;
+}
 .scroll-mr-px{
   scroll-margin-right: 1px;
 }
@@ -11801,6 +11976,9 @@ button, input, optgroup, select, textarea{
 .-scroll-mr-96{
   scroll-margin-right: -24rem;
 }
+.-scroll-mr-500{
+  scroll-margin-right: -500px;
+}
 .-scroll-mr-px{
   scroll-margin-right: -1px;
 }
@@ -11933,6 +12111,9 @@ button, input, optgroup, select, textarea{
 .scroll-mb-96{
   scroll-margin-bottom: 24rem;
 }
+.scroll-mb-500{
+  scroll-margin-bottom: 500px;
+}
 .scroll-mb-px{
   scroll-margin-bottom: 1px;
 }
@@ -12065,6 +12246,9 @@ button, input, optgroup, select, textarea{
 .-scroll-mb-96{
   scroll-margin-bottom: -24rem;
 }
+.-scroll-mb-500{
+  scroll-margin-bottom: -500px;
+}
 .-scroll-mb-px{
   scroll-margin-bottom: -1px;
 }
@@ -12197,6 +12381,9 @@ button, input, optgroup, select, textarea{
 .scroll-ml-96{
   scroll-margin-left: 24rem;
 }
+.scroll-ml-500{
+  scroll-margin-left: 500px;
+}
 .scroll-ml-px{
   scroll-margin-left: 1px;
 }
@@ -12329,6 +12516,9 @@ button, input, optgroup, select, textarea{
 .-scroll-ml-96{
   scroll-margin-left: -24rem;
 }
+.-scroll-ml-500{
+  scroll-margin-left: -500px;
+}
 .-scroll-ml-px{
   scroll-margin-left: -1px;
 }
@@ -12461,6 +12651,9 @@ button, input, optgroup, select, textarea{
 .scroll-p-96{
   scroll-padding: 24rem;
 }
+.scroll-p-500{
+  scroll-padding: 500px;
+}
 .scroll-p-px{
   scroll-padding: 1px;
 }
@@ -12627,6 +12820,10 @@ button, input, optgroup, select, textarea{
   scroll-padding-left: 24rem;
   scroll-padding-right: 24rem;
 }
+.scroll-px-500{
+  scroll-padding-left: 500px;
+  scroll-padding-right: 500px;
+}
 .scroll-px-px{
   scroll-padding-left: 1px;
   scroll-padding-right: 1px;
@@ -12803,6 +13000,10 @@ button, input, optgroup, select, textarea{
   scroll-padding-top: 24rem;
   scroll-padding-bottom: 24rem;
 }
+.scroll-py-500{
+  scroll-padding-top: 500px;
+  scroll-padding-bottom: 500px;
+}
 .scroll-py-px{
   scroll-padding-top: 1px;
   scroll-padding-bottom: 1px;
@@ -12945,6 +13146,9 @@ button, input, optgroup, select, textarea{
 .scroll-pt-96{
   scroll-padding-top: 24rem;
 }
+.scroll-pt-500{
+  scroll-padding-top: 500px;
+}
 .scroll-pt-px{
   scroll-padding-top: 1px;
 }
@@ -13077,6 +13281,9 @@ button, input, optgroup, select, textarea{
 .scroll-pr-96{
   scroll-padding-right: 24rem;
 }
+.scroll-pr-500{
+  scroll-padding-right: 500px;
+}
 .scroll-pr-px{
   scroll-padding-right: 1px;
 }
@@ -13209,6 +13416,9 @@ button, input, optgroup, select, textarea{
 .scroll-pb-96{
   scroll-padding-bottom: 24rem;
 }
+.scroll-pb-500{
+  scroll-padding-bottom: 500px;
+}
 .scroll-pb-px{
   scroll-padding-bottom: 1px;
 }
@@ -13341,6 +13551,9 @@ button, input, optgroup, select, textarea{
 .scroll-pl-96{
   scroll-padding-left: 24rem;
 }
+.scroll-pl-500{
+  scroll-padding-left: 500px;
+}
 .scroll-pl-px{
   scroll-padding-left: 1px;
 }
@@ -13993,6 +14206,9 @@ button, input, optgroup, select, textarea{
 .gap-96{
   gap: 24rem;
 }
+.gap-500{
+  gap: 500px;
+}
 .gap-px{
   gap: 1px;
 }
@@ -14193,6 +14409,11 @@ button, input, optgroup, select, textarea{
      -moz-column-gap: 24rem;
           column-gap: 24rem;
 }
+.gap-x-500{
+  -webkit-column-gap: 500px;
+     -moz-column-gap: 500px;
+          column-gap: 500px;
+}
 .gap-x-px{
   -webkit-column-gap: 1px;
      -moz-column-gap: 1px;
@@ -14345,6 +14566,9 @@ button, input, optgroup, select, textarea{
 .gap-y-96{
   row-gap: 24rem;
 }
+.gap-y-500{
+  row-gap: 500px;
+}
 .gap-y-px{
   row-gap: 1px;
 }
@@ -14545,6 +14769,11 @@ button, input, optgroup, select, textarea{
   margin-right: calc(24rem * var(--tw-space-x-reverse));
   margin-left: calc(24rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-x-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(500px * var(--tw-space-x-reverse));
+  margin-left: calc(500px * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-px > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(1px * var(--tw-space-x-reverse));
@@ -14765,6 +14994,11 @@ button, input, optgroup, select, textarea{
   margin-right: calc(-24rem * var(--tw-space-x-reverse));
   margin-left: calc(-24rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.-space-x-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-500px * var(--tw-space-x-reverse));
+  margin-left: calc(-500px * calc(1 - var(--tw-space-x-reverse)));
+}
 .-space-x-px > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(-1px * var(--tw-space-x-reverse));
@@ -14985,6 +15219,11 @@ button, input, optgroup, select, textarea{
   margin-top: calc(24rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(24rem * var(--tw-space-y-reverse));
 }
+.space-y-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(500px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(500px * var(--tw-space-y-reverse));
+}
 .space-y-px > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
@@ -15205,6 +15444,11 @@ button, input, optgroup, select, textarea{
   margin-top: calc(-24rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(-24rem * var(--tw-space-y-reverse));
 }
+.-space-y-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(-500px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(-500px * var(--tw-space-y-reverse));
+}
 .-space-y-px > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
@@ -31458,6 +31702,9 @@ button, input, optgroup, select, textarea{
 .p-96{
   padding: 24rem;
 }
+.p-500{
+  padding: 500px;
+}
 .p-px{
   padding: 1px;
 }
@@ -31624,6 +31871,10 @@ button, input, optgroup, select, textarea{
   padding-left: 24rem;
   padding-right: 24rem;
 }
+.px-500{
+  padding-left: 500px;
+  padding-right: 500px;
+}
 .px-px{
   padding-left: 1px;
   padding-right: 1px;
@@ -31800,6 +32051,10 @@ button, input, optgroup, select, textarea{
   padding-top: 24rem;
   padding-bottom: 24rem;
 }
+.py-500{
+  padding-top: 500px;
+  padding-bottom: 500px;
+}
 .py-px{
   padding-top: 1px;
   padding-bottom: 1px;
@@ -31942,6 +32197,9 @@ button, input, optgroup, select, textarea{
 .pt-96{
   padding-top: 24rem;
 }
+.pt-500{
+  padding-top: 500px;
+}
 .pt-px{
   padding-top: 1px;
 }
@@ -32074,6 +32332,9 @@ button, input, optgroup, select, textarea{
 .pr-96{
   padding-right: 24rem;
 }
+.pr-500{
+  padding-right: 500px;
+}
 .pr-px{
   padding-right: 1px;
 }
@@ -32206,6 +32467,9 @@ button, input, optgroup, select, textarea{
 .pb-96{
   padding-bottom: 24rem;
 }
+.pb-500{
+  padding-bottom: 500px;
+}
 .pb-px{
   padding-bottom: 1px;
 }
@@ -32338,6 +32602,9 @@ button, input, optgroup, select, textarea{
 .pl-96{
   padding-left: 24rem;
 }
+.pl-500{
+  padding-left: 500px;
+}
 .pl-px{
   padding-left: 1px;
 }
@@ -32488,6 +32755,9 @@ button, input, optgroup, select, textarea{
 .indent-96{
   text-indent: 24rem;
 }
+.indent-500{
+  text-indent: 500px;
+}
 .indent-px{
   text-indent: 1px;
 }
@@ -32620,6 +32890,9 @@ button, input, optgroup, select, textarea{
 .-indent-96{
   text-indent: -24rem;
 }
+.-indent-500{
+  text-indent: -500px;
+}
 .-indent-px{
   text-indent: -1px;
 }
@@ -48805,6 +49078,10 @@ body{
   right: 24rem;
 }
 
+[dir="ltr"] .ltr\:right-500{
+  right: 500px;
+}
+
 [dir="ltr"] .ltr\:right-auto{
   right: auto;
 }
@@ -49013,6 +49290,10 @@ body{
   left: 24rem;
 }
 
+[dir="ltr"] .ltr\:left-500{
+  left: 500px;
+}
+
 [dir="ltr"] .ltr\:left-auto{
   left: auto;
 }
@@ -49245,6 +49526,10 @@ body{
   margin: 24rem;
 }
 
+[dir="ltr"] .ltr\:m-500{
+  margin: 500px;
+}
+
 [dir="ltr"] .ltr\:m-auto{
   margin: auto;
 }
@@ -49499,6 +49784,10 @@ body{
   padding: 24rem;
 }
 
+[dir="ltr"] .ltr\:p-500{
+  padding: 500px;
+}
+
 [dir="ltr"] .ltr\:p-px{
   padding: 1px;
 }
@@ -49728,6 +50017,10 @@ body{
   right: 24rem;
 }
 
+[dir="rtl"] .rtl\:right-500{
+  right: 500px;
+}
+
 [dir="rtl"] .rtl\:right-auto{
   right: auto;
 }
@@ -49936,6 +50229,10 @@ body{
   left: 24rem;
 }
 
+[dir="rtl"] .rtl\:left-500{
+  left: 500px;
+}
+
 [dir="rtl"] .rtl\:left-auto{
   left: auto;
 }
@@ -50172,6 +50469,10 @@ body{
   margin: 24rem;
 }
 
+[dir="rtl"] .rtl\:m-500{
+  margin: 500px;
+}
+
 [dir="rtl"] .rtl\:m-auto{
   margin: auto;
 }
@@ -50436,6 +50737,10 @@ body{
   padding: 24rem;
 }
 
+[dir="rtl"] .rtl\:p-500{
+  padding: 500px;
+}
+
 [dir="rtl"] .rtl\:p-px{
   padding: 1px;
 }
@@ -50562,6 +50867,10 @@ body{
     grid-row: span 3 / span 3;
   }
 
+  .sm\:float-right{
+    float: right;
+  }
+
   .sm\:mt-12{
     margin-top: 3rem;
   }
@@ -50604,6 +50913,10 @@ body{
     display: none;
   }
 
+  .sm\:w-500{
+    width: 500px;
+  }
+
   .sm\:w-6\/12{
     width: 50%;
   }
@@ -50717,11 +51030,24 @@ body{
     border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
   }
 
+  .sm\:px-8{
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .sm\:text-6xl{
     font-size: 2.5rem;
     line-height: 2.75rem;
   }
 
+  [dir="ltr"] .sm\:ltr\:right-4{
+    right: 1rem;
+  }
+
+  [dir="rtl"] .sm\:rtl\:left-4{
+    left: 1rem;
+  }
+
   [dir="rtl"] .sm\:rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 1;
   }
@@ -50876,6 +51202,10 @@ body{
     width: 8.333333%;
   }
 
+  .lg\:w-auto{
+    width: auto;
+  }
+
   .lg\:w-3\/12{
     width: 25%;
   }
@@ -50940,10 +51270,6 @@ body{
     width: 1rem;
   }
 
-  .lg\:w-auto{
-    width: auto;
-  }
-
   .lg\:w-2\/4{
     width: 50%;
   }

resources/assets/js/components/NotificationPlugin/Notification.vue

@@ -2,8 +2,7 @@
   <div
     @click="tryClose"
     data-notify="container"
-    class="alert alert-notify fixed flex items-center justify-between ltr:right-4 rtl:left-4 p-4 text-black font-bold rounded-lg z-30"
+    class="alert alert-notify fixed w-full sm:w-500 flex items-center justify-between ltr:right-0 rtl:left-0 sm:ltr:right-4 sm:rtl:left-4 p-4 text-black font-bold rounded-lg z-30"
-    style="width: 500px;"
     :class="[
       { 'alert-with-icon': icon },
       verticalAlign,

resources/views/auth/users/index.blade.php

@@ -30,7 +30,7 @@
                                 <x-index.bulkaction.all />
                             </x-table.th>
 
-                            <x-table.th class="w-5/12">
+                            <x-table.th class="w-8/12 sm:w-5/12">
                                 <x-sortablelink column="name" title="{{ trans('general.name') }}" />
                             </x-table.th>
 
@@ -38,7 +38,7 @@
                                 <x-sortablelink column="email" title="{{ trans('general.email') }}" />
                             </x-table.th>
 
-                            <x-table.th class="w-4/12 sm:w-3/12" kind="right">
+                            <x-table.th class="w-4/12" kind="right">
                                 {{ trans_choice('general.roles', 1) }}
                             </x-table.th>
                         </x-table.tr>
@@ -55,7 +55,7 @@
                                     />
                                 </x-table.td>
 
-                                <x-table.td class="w-4/12 sm:w-5/12">
+                                <x-table.td class="w-8/12 sm:w-5/12">
                                     <div class="flex items-center space-x-2">
                                         @if (setting('default.use_gravatar', '0') == '1')
                                             <img src="{{ $item->picture }}" class="w-6 h-6 rounded-full mr-2 hidden lg:block text-transparent" title="{{ $item->name }}" alt="{{ $item->name }}">
@@ -81,7 +81,7 @@
                                     {{ $item->email }}
                                 </x-table.td>
 
-                                <x-table.td class="w-3/12" kind="right">
+                                <x-table.td class="w-4/12" kind="right">
                                     <div class="space-x-2">
                                         @foreach($item->roles as $role)
                                             <span class="bg-lilac-900 px-2 py-0.5 test-xs rounded-lg text-black">

resources/views/banking/reconciliations/create.blade.php

@@ -166,7 +166,7 @@
 
                     @if ($transactions->count())
                         <table class="min-w-full divide-y divide-gray-200">
-                            <tbody class="float-right">
+                            <tbody class="sm:float-right">
                                 <tr class="border-b">
                                     <th class="w-9/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-bold text-black">
                                         {{ trans('reconciliations.opening_balance') }}:

resources/views/banking/reconciliations/edit.blade.php

@@ -115,7 +115,7 @@
 
                 @if ($transactions->count())
                     <table class="min-w-full divide-y divide-gray-200">
-                        <tbody class="float-right">
+                        <tbody class="sm:float-right">
                             <tr class="border-b">
                                 <th class="w-9/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-bold text-black">
                                     {{ trans('reconciliations.opening_balance') }}:

resources/views/components/empty-page.blade.php

@@ -64,7 +64,7 @@
         </ul>
     </div>
 
-    <div class="w-full lg:w-1/2 flex justify-end lg:mt-60">
+    <div class="w-full lg:w-1/2 flex justify-end mt-8 lg:mt-60">
         <img src="{{ $image }}" alt="{{ $title }}" />
     </div>
 </div>

resources/views/components/form/group/invoice_text.blade.php

@@ -1,7 +1,7 @@
 @stack($name . '_input_start')
 <div
     @class([
-        'grid grid-cols-6 gap-8',
+        'grid sm:grid-cols-6 gap-8',
         $formGroupClass,
         'required' => $required,
         'readonly' => $readonly,

resources/views/components/index/summary.blade.php

@@ -1,4 +1,4 @@
-<div class="flex items-center justify-center text-black mt-5 sm:mt-10 mb-10">
+<div class="flex items-center justify-center text-black mt-10 mb-10">
     @if (! empty($slot) && $slot->isNotEmpty())
         {!! $slot !!}
     @elseif (! empty($items))

resources/views/components/tabs/index.blade.php

@@ -2,7 +2,7 @@
 
 <div x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
     <div>
-        <ul {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
+        <ul {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center overflow-x-scroll lg:overflow-visible']) : $attributes }}>
             {!! $navs !!}
         </ul>
     </div>

resources/views/components/tabs/nav-link.blade.php

@@ -1,7 +1,7 @@
 @props(['id', 'name', 'href', 'active'])
 
 <li 
-    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
+    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"

resources/views/components/tabs/nav.blade.php

@@ -1,7 +1,7 @@
 @props(['id', 'name', 'active'])
 
 <li 
-    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
+    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b whitespace-nowrap tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"

resources/views/settings/invoice/edit.blade.php

@@ -30,30 +30,39 @@
                     <x-slot name="body">
                         <div class="sm:col-span-2 rounded-lg cursor-pointer text-center py-2 px-2">
                             <label class="cursor-pointer">
-                                <div @click="form.template='default'">
+                                <div @click="form.template='default'" class="flex flex-col items-center">
                                     <img src="{{ asset('public/img/invoice_templates/default.png') }}" class="h-60 my-3" alt="Default" />
-                                    <input type="radio" name="template" value="default" v-model="form._template">
+
-                                    {{ trans('settings.invoice.default') }}
+                                    <div class="flex items-center space-x-2 rtl:space-x-reverse">
+                                        <input type="radio" name="template" value="default" v-model="form._template">
+                                        <span> {{ trans('settings.invoice.default') }} </span>
+                                    </div>
                                 </div>
                             </label>
                         </div>
 
                         <div class="sm:col-span-2 rounded-lg cursor-pointer text-center py-2 px-2">
                             <label class="cursor-pointer">
-                                <div @click="form.template='classic'">
+                                <div @click="form.template='classic'" class="flex flex-col items-center">
                                     <img src="{{ asset('public/img/invoice_templates/classic.png') }}" class="h-60 my-3" alt="Classic" />
-                                    <input type="radio" name="template" value="classic" v-model="form._template">
+
-                                    {{ trans('settings.invoice.classic') }}
+                                    <div class="flex items-center space-x-2 rtl:space-x-reverse">
+                                        <input type="radio" name="template" value="classic" v-model="form._template">
+                                        <span> {{ trans('settings.invoice.classic') }} </span>
+                                    </div>
                                 </div>
                             </label>
                         </div>
 
                         <div class="sm:col-span-2 rounded-lg cursor-pointer text-center py-2 px-2">
                             <label class="cursor-pointer">
-                                <div @click="form.template='modern'">
+                                <div @click="form.template='modern'" class="flex flex-col items-center">
                                     <img src="{{ asset('public/img/invoice_templates/modern.png') }}" class="h-60 my-3" alt="Modern" />
-                                    <input type="radio" name="template" value="modern" v-model="form._template">
+
-                                    {{ trans('settings.invoice.modern') }}
+                                    <div class="flex items-center space-x-2 rtl:space-x-reverse">
+                                        <input type="radio" name="template" value="modern" v-model="form._template">
+                                        <span> {{ trans('settings.invoice.modern') }} </span>
+                                    </div>
                                 </div>
                             </label>
                         </div>

safelist.txt

@@ -15,6 +15,9 @@ lg:relative
 lg:right-0
 lg:justify-around
 lg:space-x-16
+sm:ltr:right-4
+sm:rtl:left-4
+sm:w-500
 ltr:-right-1.5
 rtl:-left-1.5
 rtl:-scale-x-100