engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

align labels and dropdowns horizontally using grid layout

Browse source
This commit is contained in:
Russell Ballestrini 2025-06-30 13:21:15 -04:00
parent 79d8c590fd
commit 9340c410ff
1 changed files with 37 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

57
uncloseai.js
View file

@ -918,19 +918,21 @@ function createFloatingAIButton() {
floatingButton.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
width: 120px;
height: 50px;
border-radius: 25px;
right: 10px;
width: 110px;
height: 45px;
border-radius: 22px;
background: ${isDark ? '#ffffff' : '#000000'};
border: 2px solid ${isDark ? '#000000' : '#ffffff'};
color: ${isDark ? '#000000' : '#ffffff'};
font-family: 'ChunkFiveRegular', monospace;
font-size: 14px;
font-size: 13px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1000;
transition: all 0.3s ease;
max-width: calc(100vw - 20px);
box-sizing: border-box;
`;
}
@ -983,10 +985,12 @@ function openHermesModal() {
const modal = document.createElement('dialog');
modal.id = 'hermes-modal';
modal.open = true;
modal.style.zIndex = '2000';
modal.style.position = 'fixed';
if (USE_CUSTOM_STYLING) {
modal.style.cssText += `
modal.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 90%;
max-width: 800px;
height: 80%;
@ -995,13 +999,23 @@ function openHermesModal() {
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
background: white;
z-index: 2000;
margin: auto;
`;
} else {
modal.style.cssText += `
modal.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 0;
max-width: none;
border: none;
background: transparent;
z-index: 2000;
margin: 0;
padding: 0;
`;
}
@ -1009,8 +1023,8 @@ function openHermesModal() {
if (USE_CUSTOM_STYLING) {
article.style.cssText = `
height: 100%;
display: flex;
flex-direction: column;
display: grid;
grid-template-rows: auto auto 1fr auto;
margin: 0;
padding: 0;
`;
@ -1036,8 +1050,8 @@ function openHermesModal() {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 16px 20px;
display: flex;
justify-content: space-between;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
`;
} else {
@ -1127,18 +1141,19 @@ function openHermesModal() {
controls.style.cssText = `
padding: 16px 20px;
border-bottom: 1px solid #e0e0e0;
display: flex;
display: grid;
grid-template-columns: auto 1fr auto 1fr;
gap: 12px;
flex-wrap: wrap;
align-items: center;
`;
} else {
controls.className = 'uncloseai-controls';
controls.style.cssText = `
display: grid;
grid-template-columns: 1fr;
grid-template-columns: auto 1fr auto 1fr;
gap: 12px;
padding: 0.5rem;
align-items: center;
`;
}
@ -1206,9 +1221,9 @@ function openHermesModal() {
const actionButtons = document.createElement('div');
if (USE_CUSTOM_STYLING) {
actionButtons.style.cssText = `
display: flex;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
flex-wrap: wrap;
`;
} else {
actionButtons.className = 'uncloseai-button-group';
@ -1262,8 +1277,10 @@ function openHermesModal() {
actionButtons.appendChild(ttsBtn);
actionButtons.appendChild(refreshBtn);
// Make action buttons span all columns
actionButtons.style.gridColumn = 'span 4';
controls.appendChild(actionButtons);
controls.appendChild(voiceBreak);
controls.appendChild(modelLabel);
controls.appendChild(modelSelect);
controls.appendChild(voiceLabel);
@ -1273,7 +1290,7 @@ function openHermesModal() {
const chatArea = document.createElement('div');
if (USE_CUSTOM_STYLING) {
chatArea.style.cssText = `
flex: 1;
grid-row: 3;
padding: 20px;
overflow-y: auto;
border-bottom: 1px solid #e0e0e0;