unable to layout components properly

Hi!

I want to make a layout like in [i] preferable.PNG [/i].
Left side - form layout with user data, middle - table with a button(vertical layout), right side - form layout with npc data.

I’ve created this window.

@SuppressWarnings("serial")
public class DialogWindow extends Window {

    private TextQuestUi tqu = (TextQuestUi) TextQuestUi.getCurrent();
    
    private TextArea playerName;
    private TextArea playerLevel;
    private TextArea playerGender;
    
    private TextArea interlocutorName;
    private TextArea interlocutorLevel;
    private TextArea interlocutorGender;
    private TextArea interlocutorAge;
    
    public DialogWindow(Npc interlocutor) {
        setCaption("Dialog");
        setHeight("500");
        setWidth("900");
        
        HorizontalLayout windowLayout = new HorizontalLayout();
        windowLayout.setSizeFull();
        
        HorizontalLayout componentLayout = new HorizontalLayout();
        componentLayout.setWidth("880");
        
        // left player frame
        FormLayout playerLayout = new FormLayout();
        playerLayout.setWidth("270");
        playerLayout.addComponent(new Label(" "));
        
        Image pImage = buildPlaceholderImage();
        playerLayout.addComponent(pImage);
             
        Player p = tqu.getResourceHolder().getPlayer();
        playerName = buildDefaultTextField("Player", p.getName());
        playerLayout.addComponent(playerName);
        playerLevel = buildDefaultTextField("Level", String.valueOf(p.getLevel()));
        playerLayout.addComponent(playerLevel);
        playerGender = buildDefaultTextField("Gender", p.getGender());
        playerLayout.addComponent(playerGender);
        
        componentLayout.addComponent(playerLayout);
        
        // dialog frame
        VerticalLayout dialogLayout = new VerticalLayout();
        dialogLayout.setWidth("340");
        
        Table table = new Table();
        table.setWidth("100%");
        table.setHeight("400");
        
        table.addContainerProperty("Speaker", String.class, null);
        table.addContainerProperty("Dialog", String.class, null);
        
        dialogLayout.addComponent(table);
        dialogLayout.setComponentAlignment(table, Alignment.TOP_LEFT);
        
        Button continueBtn = new Button();
        continueBtn.setIcon(FontAwesome.ARROW_RIGHT);
        continueBtn.setWidth("100");
        dialogLayout.addComponent(continueBtn);
        dialogLayout.setComponentAlignment(continueBtn, Alignment.BOTTOM_RIGHT);   

        componentLayout.addComponent(dialogLayout);
        componentLayout.setComponentAlignment(dialogLayout, Alignment.MIDDLE_CENTER);
        
        // right npc frame
        FormLayout npcLayout = new FormLayout();
        npcLayout.setWidth("270");
        npcLayout.addComponent(new Label(" "));
        
        Image nImage = buildPlaceholderImage();
        npcLayout.addComponent(nImage);
        
        Npc npc = interlocutor;
        interlocutorName = buildDefaultTextField("Npc", npc.getName());
        npcLayout.addComponent(interlocutorName);
        interlocutorLevel = buildDefaultTextField("Level", String.valueOf(npc.getNpcData().getLevel()));
        npcLayout.addComponent(interlocutorLevel);
        interlocutorGender = buildDefaultTextField("Gender", npc.getNpcData().getGender());
        npcLayout.addComponent(interlocutorGender);
        interlocutorAge = buildDefaultTextField("Age", String.valueOf(npc.getNpcData().getAge()));
        npcLayout.addComponent(interlocutorAge);
        
        componentLayout.addComponent(npcLayout);
        
        windowLayout.addComponent(componentLayout);
        windowLayout.setComponentAlignment(componentLayout, Alignment.MIDDLE_RIGHT);
        
        setContent(windowLayout);
        center();
        setModal(true);
        setResizable(false);
    }
    
    private Image buildPlaceholderImage() {
        String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
        Image image = new Image(null, new FileResource(new File(basepath + "/WEB-INF/placeholder.jpg")));
        image.setWidth("100");
        image.setHeight("100");
        return image;
    }
    
    private TextArea buildDefaultTextField(String title, String value) {
        TextArea built = new TextArea(title);
        built.setHeight("40");
        built.setWidth("100");
        built.setEnabled(false);
        built.setValue(value);
        
        return built;
    }
}

But as a result I’ve got a window which looks like in dialog.PNG.
No matter what I do can’t move table to left - it always overlaps with NPC form layout.

What’s the problem?

20301.png
20302.png

try componentLayout.setExpandRatio(dialogLayout,1);