Gui blocks layout misaligned

Hi,

any idea how to fix that button that it will fit nicely like the one above it?
Could you please tell me what I have missed?

here is my code:

with gr.Blocks(title = 'Switcher') as switches_ver:
    gr.Markdown('Welcome to IPBlocker')
    with gr.Tab(label = 'IPBlocker'):
        with gr.Row():
            ips_to_block = gr.Textbox(label = "IPs", lines = 10, placeholder=('Please fill Ips to block'))
            output_textbox = gr.Textbox(label = "Results", lines=10)
        with gr.Row():
            block_btn = gr.Button('Block')
            #output_file = gr.File('fortigate.txt')
            block_btn.click(fn=block_ip, inputs = ips_to_block, outputs = output_textbox)

    with gr.Tab(label = 'Switcher'):
        with gr.Row():   
            with gr.Column():
                switch_box = gr.Textbox(label = 'Switches', lines = 10, placeholder='Please fill switches IPs...')
                show_ver = gr.Button('Show current switches version')    
            output_textbox = gr.Textbox(label='Results',lines = 10)
        with gr.Row():
            upgrade_ver = gr.Button('Upgrade selected switches')
            output_file = gr.File(['switches_good_results.txt', 'switches_bad_results.txt'])
            show_ver.click(fn=switch_ver, inputs = switch_box, outputs = [output_textbox, output_file])
            upgrade_ver.click(fn=block_ip, inputs = ips_to_block, outputs=[output_textbox, output_file])

Thank you!

Hi there! It looks like the combination or Rows() and Columns() is causing this issue. What happens if you have the following code for the second tab:

    with gr.Tab(label = 'Switcher'):
        with gr.Row():   
            with gr.Column():
                switch_box = gr.Textbox(label = 'Switches', lines = 10, placeholder='Please fill switches IPs...')
                show_ver = gr.Button('Show current switches version')    
                upgrade_ver = gr.Button('Upgrade selected switches')
            with gr.Column():
                output_textbox = gr.Textbox(label='Results',lines = 10)
                output_file = gr.File(['switches_good_results.txt', 'switches_bad_results.txt'])
                show_ver.click(fn=switch_ver, inputs = switch_box, outputs = [output_textbox, output_file])
                upgrade_ver.click(fn=block_ip, inputs = ips_to_block, outputs=[output_textbox, output_file])

Hi @abidlabs

Thanks for the reply!

Yeah, it worked! it is way simpler than I thought, I tried many combination but nothing worked for me.
Just to understand right, if I create a 2nd:

with gr.Column()

because its under the parent:

with gr.Row():

It will create that column (the 2nd) next to the first one, to its right side?

Thank you and for the community very much!

Yes that’s exactly it!

Thank you so much for your support! @abidlabs