/* container fills the viewport */
.sensors-setting-page-container{
    height: 95vh;           /* was 95vh */
    width: 97.5vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;        /* keep page from double scrolling */
    box-sizing: border-box;
}

/* controllers section: total 10vh (header + table body) */
.sensors-setting-devices-div{
    height: 15vh;            /* was 20vh */
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;           /* important for nested flex scroll */
}

/* sensors section: fill the rest */
.sensors-setting-sensors-div{
    flex: 1 1 auto;          /* take remaining height */
    min-height: 0;           /* allow children to scroll */
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* header stays fixed height (you already use 4vh) */
.sensors-setting-header-div{
    height: 4vh;
}

/* the div that wraps each table should flex and allow scrolling inside */
.sensors-setting-div-body{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.sensors-setting-header-div{
    width: 100%;
    height: 4vh; 
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content:space-between;  
    background-color: var(--div-head-first-background-color);
    gap: 2px;
    padding-left: 2px;
    border: var(--div-border);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-sizing: border-box; 
}

.sensors-setting-filter-select-div{
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content:space-between; 
}