Changed HTML to textbox instead

Using HTML caused an issue where the row would expand for a frame when changing the sliders because of the loading animation. This solution also doesn't use any additional HTML padding

modules/ui.py

@@ -260,7 +260,7 @@ def calc_resolution_hires(x, y, scale):
     scaled_x = int(x * scale // 8) * 8
     scaled_y = int(y * scale // 8) * 8
     
-    return "<p style='margin: -1em 0em 0.7em 1.35em'>Upscaled resolution: "+str(scaled_x)+"x"+str(scaled_y)+"</p>"
+    return str(scaled_x)+"x"+str(scaled_y)
 
 def apply_styles(prompt, prompt_neg, style1_name, style2_name):
     prompt = shared.prompt_styles.apply_styles_to_prompt(prompt, [style1_name, style2_name])
@@ -726,7 +726,10 @@ def create_ui():
                                 hr_resize_y = gr.Slider(minimum=0, maximum=2048, step=8, label="Resize height to", value=0, elem_id="txt2img_hr_resize_y")
                             
                             with FormRow(elem_id="txt2img_hires_fix_row3"):        
-                                hr_final_resolution = gr.HTML(value=calc_resolution_hires(width.value, height.value, hr_scale.value), elem_id="txtimg_hr_finalres")
+                                hr_final_resolution = gr.Textbox(value=calc_resolution_hires(width.value, height.value, hr_scale.value), 
+                                    elem_id="txtimg_hr_finalres", 
+                                    label="Upscaled resolution",
+                                    interactive=False)
                                 hr_scale.change(fn=calc_resolution_hires, inputs=[width, height, hr_scale], outputs=hr_final_resolution, show_progress=False)
                                 width.change(fn=calc_resolution_hires, inputs=[width, height, hr_scale], outputs=hr_final_resolution, show_progress=False)
                                 height.change(fn=calc_resolution_hires, inputs=[width, height, hr_scale], outputs=hr_final_resolution, show_progress=False)