Responsive Panel

// Global variable overrides. Must be declared before importing Valo.

// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;

// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;

// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g  Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;

// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;

// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;

// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

@import "../valo/valo.scss";

@mixin group2responsive {
  @include valo;

  // Insert your own theme rules here

  .main-layout{
    background-color: red;
    font-weight: bolder;
    
    .personal-info {
        width: 100px;
        background-color: red;
    }
    
    .personal-info .v-textfield {
        width: 100px;
    }

    &[width-range~="0-500px"] {
        background-color: black;
        
        .v-panel {
            background-color: white;
            width: 400px;
        }
    }
  }
}

my main ui

package com.example.group2responsive;

import com.example.ui.ClaimsProductInfo;
import com.example.ui.PersonnalInfoPanel;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.Page;
import com.vaadin.server.Responsive;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

@SuppressWarnings("serial")
@Theme("group2responsive")
public class Group2responsiveUI extends UI {

    public static PersonnalInfoPanel personalInfo = new PersonnalInfoPanel();
    public static ClaimsProductInfo claimsProduct = new ClaimsProductInfo();
    
    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = Group2responsiveUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        setTitle("CLAIMS");
        final CssLayout layout = new CssLayout();
        layout.addStyleName("main-layout");
        layout.setWidth("100%");
        Responsive.makeResponsive(layout);
//        layout.setSpacing(true);
//        layout.setMargin(true);
        
        setContent(layout);
        
        layout.addComponent(personalInfo);
//        layout.setComponentAlignment(personalInfo, Alignment.BOTTOM_RIGHT);
        layout.addComponent(claimsProduct);
        
//        layout.setComponentAlignment(claimsProduct, Alignment.BOTTOM_RIGHT);
        
    }
    
    public static void setTitle (String newTitle)
    {
        
        Page.getCurrent().setTitle(newTitle);
    }
    
    public static void setSearchEnable ( boolean option ) { personalInfo.setSearchEnable(option); }

}

my personal info UI.. which is my 

But it doesnt work..

What is the width of the panel? If you set the width on the server-side it's most likely overriding the SCSS.