[Bug] Mobile UI - module image preview

[M3g4m3]

💻 系统环境 | Operating System

Other

🌐 浏览器 | Browser

Chrome

📦 SD Wbui 版本或提交 | Version or Commit

No response

📦 Lobe Theme 版本或提交 | Version or Commit

No response

🐛 问题描述 | Bug Description

The image preview cluster is not fixed but overlaps other UIs when scrolling the page

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

No response

[KingPungy]

please fix this. the mobile app is not usable like this. The moment you generate an image the generation parameters overlap with all the settings and flow off screen.

This seems to be the problem for the image container that overlaps everything. To remove overlapping:

div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown {
    overflow: visible !important;   " <- this needs to be gone or disabled"
}

for this element:

<div id="txt2img_gallery_container"   ...

To center the generation parameters on the screen: add: width: 100% to style like below

<div id="txt2img_results" class="gradio-column svelte-vt1mxs gap panel mobile" style="flex-grow: 1;width: 100%;">

[KingPungy]

i changed the line in the style.css file at:

line 1071

#img2img_results, #txt2img_results, #extras_results {
    position: sticky;
    top: 0.5em;
    width: 100%; /* <- to fix results going off screen*/
}

and line 149

/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reason. */
div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown{
    /* overflow: visible !important; */ /* <- To fix image panel overlapping settings*/
}

this fixed it for me.

[Hilurex]

the problem it is the autotag extexcion stops working :(