Part-DB-server/assets/css/app/tables.css

/*
 * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
 *
 *  Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU Affero General Public License as published
 *  by the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

/****************************************
 * Action bar
 ****************************************/

.sticky-select-bar {
    position: sticky;
    top: 120px;
    z-index: 1000; /* Ensure the bar is above other content */
}

/****************************************
* Tables
****************************************/

/* We need to override the z index, or the elements will overlap the fixed header from datatables. */
table .input-group .form-control {
    z-index: 0;
}

table .input-group-btn:last-child>.btn, table .input-group-btn:last-child>.btn-group {
    z-index: 0;
}

/* Hide datatables fixedHeaders on small devices */
@media  only screen and (max-width: 1000px){
    .fixedHeader-floating {
        display: none;
    }
}

/* Mobile table improvements */
@media (max-width: 768px) {
    /* Better table wrapper for horizontal scrolling */
    .table-responsive {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 1rem;
    }
    
    /* Improve table appearance on mobile */
    .table {
        font-size: 0.9rem;
        margin-bottom: 0;
    }
    
    .table th {
        font-size: 0.85rem;
        font-weight: 600;
        padding: 12px 8px;
        background-color: var(--bs-gray-100);
        border-bottom: 2px solid var(--bs-gray-300);
        white-space: nowrap;
    }
    
    .table td {
        padding: 10px 8px;
        vertical-align: middle;
    }
    
    /* Improve button groups in tables */
    .table .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
    }
    
    .table .btn-group .btn {
        flex: 0 0 auto;
        min-width: 36px;
        min-height: 36px;
        padding: 6px 8px;
        font-size: 0.8rem;
    }
    
    /* DataTables mobile improvements */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 0.75rem;
    }
    
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
        min-height: 44px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .dataTables_wrapper .dataTables_length select {
        min-height: 44px;
        padding: 8px 12px;
    }
    
    /* DataTables pagination improvements */
    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .dataTables_wrapper .dataTables_paginate .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2px;
    }
    
    /* DataTables info text */
    .dataTables_wrapper .dataTables_info {
        text-align: center;
        padding: 1rem 0;
        font-size: 0.9rem;
    }
    
    /* Hide some table columns on very small screens */
    @media (max-width: 480px) {
        .table .mobile-hidden {
            display: none;
        }
        
        /* Stack table controls vertically on very small screens */
        .dataTables_wrapper .row > div {
            margin-bottom: 0.5rem;
        }
    }
}

/**
 * Enforce white links on selected rows in datatables
 */
table.dataTable > tbody > tr.selected > td > a {
    color: white !important;
}

/*******************************
    Parts datatable styling
 ******************************/
.attach-table-icon {
    margin-right: 0.7em;
    color: var(--bs-gray);
}
.attach-table-icon:hover {
    color: var(--bs-gray-dark);
}
.badge-table {
    margin-right: 0.2em;
}

/** Do not add margin below description in part table */
.markdown-inline p {
    margin-block-end: 0;
}

table.dataTable {
    margin-top: 0 !important;
}

div.dataTables_wrapper div.dataTables_info {
    white-space: normal;
}

/** Ensure proper rendering/spacing of the select checkbox in tables */
th.select-checkbox {
    min-width: 10px;
}

/********************************************************************
 * Datatables definitions/overrides
 ********************************************************************/

.dt-length {
    display: inline-flex;
}

/** Fix datatables select-checkbox position */
table.dataTable tr.selected td.select-checkbox:after
{
    margin-top: -20px !important;
}

/** Show pagination right aligned */
.dt-paging .pagination {
    justify-content: flex-end;
}

/** Fix table row coloring */
table.table.dataTable > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
}


/******************************************************
Classes for Datatables export
*******************************************************/

#export-title,
#export-messageTop,
.export-helper{
    display: none;
}