Fix styling from A1111 update (#31)

README.md

@@ -74,7 +74,7 @@ JavaScript & accordion aspect ratios _might_ not play well together - I don't th
 
 Developed using existing [AUTOMATIC1111 webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui) dependencies.
 
-It's recommended to use the python version specified by A111 webui.
+It's recommended to use the python version specified by A1111 webui.
 
 However - for running unit tests, we use pytest.
 

aspect_ratio_helper/_components.py

@@ -122,6 +122,7 @@ class PredefinedAspectRatioButtons(ArhUIComponent):
         ), gr.Row(
             variant='compact',
             visible=self.should_show(),
+            elem_classes='arh-btn-row',
         ):
             for ar_str in aspect_ratios:
                 w, h, *_ = [abs(float(d)) for d in ar_str.split(':')]
@@ -205,6 +206,7 @@ class PredefinedPercentageButtons(ArhUIComponent):
         ), gr.Row(
             variant='compact',
             visible=self.should_show(),
+            elem_classes='arh-btn-row',
         ):
             pps = _settings.safe_opt(_constants.ARH_PREDEFINED_PERCENTAGES_KEY)
             percentages = [abs(int(x)) for x in pps.split(',')]

style.css

@@ -10,18 +10,23 @@
 }
 
 #txt2img_ratio select, #img2img_ratio select {
-   -o-appearance: none;
-   -ms-appearance: none;
-   -webkit-appearance: none;
-   -moz-appearance: none;
-   appearance: none;
-   background-image: unset;
-   padding-right: unset;
-   min-width: 40px;
-   max-width: 40px;
-   min-height: 40px;
-   max-height: 40px;
-   line-height: 40px;
-   padding: 0;
-   text-align: center;
+    font-family: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
+    tab-size: 4;
+    color: white;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 1.4;
+    box-sizing: border-box;
+    position: relative;
+    border: 1px solid #374151;
+    border-radius: 8px;
+    background: #1f2937;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    padding-right: 1px;
+    margin-bottom: 10px;
+    padding-left: 2px;
+}
+
+.arh-btn-row button {
+    min-width: fit-content;
 }