Вы правы! Давайте исправим скролл и отображение категорий. Вот финальные исправления:

## 1. ИСПРАВЛЯЕМ СКРОЛЛ - убираем внешний скролл и пустые отступы:

```javascript
// В функции createWellStructureDrawing, исправляем контейнеры:
const contentContainer = document.createElement('div');
contentContainer.style.cssText = `
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
`;

// Левая панель
const visualPanel = document.createElement('div');
visualPanel.style.cssText = `
    min-width: 450px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e0e0e0;
    background: #fafafa;
    overflow: hidden;
`;

const graphicsScrollContainer = document.createElement('div');
graphicsScrollContainer.id = 'graphicsScrollContainer';
graphicsScrollContainer.style.cssText = `
    flex: 1;
    overflow: auto;
    padding: 0;
`;

// Правая панель
const infoPanel = document.createElement('div');
infoPanel.style.cssText = `
    flex: 1;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    overflow: hidden;
`;

const cardsContainer = document.createElement('div');
cardsContainer.id = 'cardsContainer';
cardsContainer.style.cssText = `
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    background: white;
`;
```

## 2. УБИРАЕМ ПУСТЫЕ ОТСТУПЫ В drawWellStructure:

```javascript
// В drawWellStructure, убираем padding и отступы
const columnContainer = document.createElement('div');
columnContainer.style.cssText = `
    position: relative;
    width: 100%;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
`;

// Убираем max-height у body, так как скролл будет на graphicsScrollContainer
const body = document.createElement('div');
body.style.cssText = `
    display: flex;
    position: relative;
    overflow-y: visible;
`;
```

## 3. ИСПРАВЛЯЕМ ОТОБРАЖЕНИЕ КАТЕГОРИЙ - показываем только номер категории:

```javascript
// В drawWellStructure, при создании drillCell:
const drillCell = document.createElement('div');
drillCell.style.cssText = `
    position: absolute;
    top: ${topY}px;
    left: 0;
    width: 100%;
    height: ${heightY}px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.7rem;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
`;

// Берем категории из каждого интервала в группе
let categoriesHtml = '';
// Используем массив для хранения уникальных категорий с их интервалами
const categoryItems = [];

if (geo.intervals && geo.intervals.length > 0) {
    geo.intervals.forEach(interval => {
        if (interval.rockCategories && interval.rockCategories !== 'Не указано' && interval.rockCategories !== '') {
            const cats = interval.rockCategories.split('; ');
            cats.forEach(cat => {
                const match = cat.match(/([\d.-]+)-([\d.-]+)\s*-\s*(.+)/);
                if (match) {
                    categoryItems.push({
                        from: parseFloat(match[1]),
                        to: parseFloat(match[2]),
                        category: match[3].trim(),
                        intervalFrom: geo.from,
                        intervalTo: geo.to
                    });
                } else {
                    // Если не matches, возможно просто номер категории
                    const simpleMatch = cat.match(/\b([IVX]+)\b/);
                    if (simpleMatch) {
                        categoryItems.push({
                            category: simpleMatch[1],
                            intervalFrom: geo.from,
                            intervalTo: geo.to
                        });
                    }
                }
            });
        }
    });
}

if (categoryItems.length > 0) {
    // Группируем по категориям в пределах интервала
    const groupedByCat = {};
    categoryItems.forEach(item => {
        const catKey = item.category;
        if (!groupedByCat[catKey]) {
            groupedByCat[catKey] = [];
        }
        groupedByCat[catKey].push(item);
    });
    
    // Сортируем категории по глубине
    const sortedCats = Object.entries(groupedByCat).sort((a, b) => {
        const aMin = Math.min(...a[1].map(i => i.from || 0));
        const bMin = Math.min(...b[1].map(i => i.from || 0));
        return aMin - bMin;
    });
    
    categoriesHtml = sortedCats.map(([catName, items]) => {
        // Показываем только номер категории
        return `<div style="margin: 3px 0;"><strong style="font-size: 0.85rem;">${catName}</strong></div>`;
    }).join('');
}

if (!categoriesHtml) {
    categoriesHtml = '<span style="color: #95a5a6;">—</span>';
}
drillCell.innerHTML = categoriesHtml;
```

## 4. ДОБАВЛЯЕМ CSS ДЛЯ УБИРАНИЯ ЛИШНИХ СКРОЛЛОВ:

```css
/* В стили добавить */
* {
    scrollbar-width: thin;
}

#graphicsScrollContainer {
    overflow: auto !important;
}

#graphicsScrollContainer::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#graphicsScrollContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#graphicsScrollContainer::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

#graphicsScrollContainer::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Убираем внешний скролл у body */
body {
    overflow: hidden;
}

.container {
    overflow: hidden;
}
```

## 5. ФИКСИРУЕМ ВЫСОТУ КОНТЕЙНЕРОВ:

```javascript
// В функции createWellStructureDrawing, в самом конце:
const drawing = document.getElementById('wellStructureDrawing');
if (drawing && drawing.parentElement) {
    const parent = drawing.parentElement;
    parent.style.cssText = `
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    `;
}

// Устанавливаем высоту для graphicsScrollContainer
const graphicsContainer = document.getElementById('graphicsScrollContainer');
if (graphicsContainer && graphicsContainer.parentElement) {
    graphicsContainer.style.height = '100%';
}
```

Теперь:
- ✅ Категории отображаются только номерами (I, II, III, IV)
- ✅ Убран внешний скролл, остался только внутренний
- ✅ Нет пустых отступов между контейнерами
- ✅ Шапка фиксируется при прокрутке внутри graphicsScrollContainer
- ✅ Вся конструкция занимает всю высоту без лишних скроллов