Babylon.js/sandbox/src/scss/footer.scss

.footer {
    position: relative;
    width: 100%;
    height: var(--footer-height);
    margin: 0;
    padding: 0;
    background-color:var(--footer-background);
    font-size: 0;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 201px 1fr 210px;
    
    .footerLeft {
        display: grid;
        grid-column: 1;
        grid-row: 1;
        padding-left: 40px;
        align-content: center; 
        overflow: hidden;

        #logoImg {
            height: var(--footer-height);
            width: 161px;
        }
    }

    .button {
        float: left; /* Float links side by side */
        width: var(--footer-height);
        height: var(--footer-height);
        margin: 0px;
        padding: 0;
        transition: all 0.3s ease; /* Add transition for hover effects */
        display: grid;
        align-content: center;
        justify-content: center;
        cursor: pointer;

        &.long {
            width: 200px;
            grid-template-columns: var(--footer-height) calc(200px - var(--footer-height));

            .button-icon {
                grid-row: 1;
                grid-column: 1;
            }

            .button-text {
                grid-row: 1;
                grid-column: 2;
                align-self: center;
                justify-self: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: var(--font-size)
            }
        }

        &.active {
            background-color: var(--button-hover-color);
        }

        img {
            width: var(--footer-height);
            height: var(--footer-height);
        }
        
        &:hover {
            background-color: var(--button-hover-color);
        }
        
        &:active {
            background-color: var(--button-hover-background);
        }
    }   

    .dropup {
        position: relative;        

        .dropup-content {
            position: absolute;
            bottom: var(--footer-height);
            left: 0px;     
            z-index: 100;            
            width: calc(2 * var(--footer-height));

            &.long-mode {
                width: 200px;
            }

            div  {
                background-color: var(--button-hover-color);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: var(--font-size);
                width: 100%;
                color: white;
                cursor: pointer;
                height: 40px;
                box-sizing: border-box;
                padding: 0;
                margin: 0;
                display: grid;
                align-content: center;
                justify-content: center;
            
                &:hover {
                    background-color: var(--button-hover-hover); 
                    transition: all 0.3s ease;
                }
                &:active {
                    background-color: var(--button-hover-background);
                    transition: all 0.3s ease;
                }
            }
        }     
    }

    .footerRight {
        display: flex;
        flex-direction: row-reverse;
        grid-column: 3;
        grid-row: 1;
                     
        .custom-upload {
            position: relative;
            background-position: center right;
            background-repeat: no-repeat;
            width: var(--footer-height);
            height: var(--footer-height);
            cursor: pointer;
            display: grid;

            img {
                grid-row: 1;
                grid-column: 1;
                width: var(--footer-height);
                height: var(--footer-height);
                pointer-events: none;
            }
            
            &:hover {
                background-color: var(--button-hover-color);
            }
            
            &:active {
                background-color: var(--button-hover-background);
            }

            input[type=file] {
                grid-row: 1;
                grid-column: 1;
                outline:none;
                position: relative;
                text-align: right;    
                -moz-opacity:0 ;
                opacity: 0;
                z-index: 2;
                width:100%;
                height:100%;
                filter:alpha(opacity=0);
            }
        }
    }
}

@media (max-width: 768px) {
    .footer {       
        grid-template-columns: 0px 1fr 150px;

        .dropup {
            .dropup-content {    
                width: 100px;
            }
        }

        .button {    
            &.long {
                width: 100px;                
                grid-template-columns: var(--footer-height) calc(100px - var(--footer-height));
            }
        }
    }
}