Content extends beyond screen

[sajjadafzal]

Content extends beyond screen whenusing deepseek-coder:latest for code generation.

[kartikm7]

Content extends beyond screen whenusing deepseek-coder:latest for code generation.

Hello @sajjadafzal welcome to the LLocal community. So sorry you faced this issue. Could you share a screenshot? Will try to recreate it on my system, and fix the issue in the upcoming version!

[minzdrav]

Hi @kartikm7
I have the same issue. Please look at screenshots.

`

<title>Flexify Table</title> <style> body { font-family: Arial, sans-serif; }

    /* Basic tab structure styling */
    .tab-container { margin-top: 20px; }
    .tabs ul { list-style: none; padding: 0; width: 100%; background: #eee; }
    .tabs li { display: inline; margin-right: 5px; cursor: pointer; text-transform: uppercase; font-weight: bold; transition: color 0.3s ease; }
    .content div { padding: 20px; border: 1px solid #ddd; background: white; display: none; width: 100%; height: 100vh; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
    .content div[data-tab] { /* Style content as needed */ }
</style>

0,256); font-family: Arial, sans-serif;">

<div class="content">
    <!-- Content sections corresponding to the tabs -->
    <div id="tab1" data-tab><!-- Tab 1 content similar to a row of an html table goes here. This can include text, images etc.--></div>
    
    <div id="tab2" data-tab><!-- Another tab section's content --></div>
    
    <!-- Add more tabs as necessary for your original HTML tables-->
</div>

<script> // JavaScript to create and manage the dynamic Flexified table layout with tabs. function initializeTabs() { const tabContainer = document.querySelector('.tab-container'); const tabsUl = document.getElementById('tabs'); let selectedTab; // To keep track of which tab is currently active function createTab(index, content) { if (content === undefined) return null; // Skip creating a blank tab with no content const li = document.createElement('li'); tabsUl.appendChild(li); const button = document.createElement('button'); buttons[index] = button; // Store the reference for later use to switch tabs programmatically if needed (e.g., keyboard navigation) li.appendChild(button).textContent = 'Tab Name'; // Replace with your actual tab name or data label as in HTML table headers let contentDiv = document.createElement('div'); selectedTab = index; // Mark the first created/loaded content div as active initially if applicable (e.g., based on some condition) button.onclick = function() { toggleActive(index); }; // Handle tab click event to switch tabs programmatically within this script logic, not included here for brevity but can be added easily by following the pattern shown above for 'selectedTab' and content switching functions below if (content) { const dataDiv = document.createElement('div'); // Create a div that will contain tab-specific content or similar to an HTML table row/column structure, customizing style as needed using CSS classes instead of inline styles for cleaner approach and maintainability tabsUl.appendChild(dataDiv); // Append the data container right after its corresponding header in UL (tab list), representing a 'table column' logic here which holds content when that tab is active 0,256); font-family: Arial, sans-serif;"> <script> // JavaScript to initialize the tabs system similar in spirit to converting an HTML table into a tabbed interface with Flex layout principles applied. function toggleActive(index) { const contentDivs = document.querySelectorAll('.content div'); // Select all dynamic divs which will act as our 'table rows' for tabs functionality here if (selectedTab !== index) { // If the active tab changes, hide/show appropriate section and update selectedIndex accordingly let newActiveDiv = document.getElementById(tabs[index]); // Select current content div based on previously stored reference or its data-tab attribute for easy switching between sections similar to rows in a table layout (using id directly is another approach) if (!newActiveDiv || index !== selectedTab) { // If there's no active division found, create/activate it as appropriate and set the new one based on index for this tab click event logic. const contentToShow = document.getElementById(tabs[index].dataset.tab); // Retrieve specific section data by ID if available to display or insert relevant HTML here, similar in conceptual approach as handling table row's innerHTML based on cellForFooterView method mentioned earlier newActiveDiv = contentToShow || document.createElement('div'); // Create a div for the tab content and set its textContent accordingly to represent what would be 'innerText of a HTML TD element', or more dynamic data handling logic can replace this with actual content fetching/rendering based on your application needs tabsUl.appendChild(newActiveDiv); // Append back into UL representing tab headers, as the active one for current interaction (click event) } if (selectedTab !== index && selectedContentDivs[index]) { // Hide currently shown content based on previously stored reference or its data-tab attribute to provide seamless switching experience between sections similar in conceptual approach as toggling table row visibility for other tabs functionality here. const currentActiveDiv = document.getElementById(tabs[selectedTab].dataset.tab); // Retrieve currently active content's div element based on its data-tab attribute or previously stored reference, and set its display style to 'none' (to hide it) using modern standards of CSS class manipulation for showing/hiding elements currentActiveDiv.style.display = 'none'; // Hide the currently shown content by setting inline styles directly as this script assumes a direct mapping between tab indexes and their corresponding divs with data-tab attributes or previously stored references (for dynamic, not hardcoded tabs) which can be achieved through more complex logic to map them in case of non-linear number/sizes of contents } contentDivs.forEach(div => div.style.display = 'none'); // Initially hide all other tab content divs except for the active one (in this block) if needed, as not shown here but can be included in full script implementation to provide a cleaner initial state of tabs interaction before any user actions selectedTab = index; // Update selectedIndex based on currently clicked/activated div's tab label or data-tab attribute for maintaining consistent 'active row selection logic similar in spirit as highlighted rows and cells after pagination (like with HTML TABLE_FOOTERView) here, allowing further customization of this script to integrate it better into the original Flexible Table environment if required newActiveDiv.style.display = ''; // Show newly activated tab content div by setting inline styles directly or alternatively using CSS classes that represent 'active' state for elements like table rows, based on modern standards of showing/hiding DOM element visibility (as this script assumes direct mapping between tabs and corresponding divs with data-tab attributes) which can be achieved through more complex logic to map them in case of nonlinear number or sizes of contents } else { // If the current tab is already active, we do nothing here explicitly as no changes are required. However, you could implement additional functionality like scrolling/highlighting if desired based on your application requirements and original table's behavior logic where applicable to enhance interactivity further (not shown in this script example). } } // Additional initialization or event listener attachments can go here as needed for full integration into the Flexible Table environment, beyond just tab switches if necessary. Not fully implemented but mentioned conceptually akin to handling mouse events on HTML table headers/cells (like sorting and scrolling after pagination in an original flexible tables application) </script>

`

[kartikm7]

Hello @minzdrav welcome to the LLocal community.
I think setting a max-width for the code-block component is necessary. I'll get it fixed!
Thanks for sharing the screenshots.

[albertotn]

Same problem for me.
To reproduce it:

1. pull phi3:mini model
2. ask to write Hello world java program
3. ask to rewrite it using swing, content is out of the window:

[kartikm7]

@sajjadafzal @albertotn @minzdrav I have fixed it, and if the issue still persists after the next release we can re-open the issue!