diff --git a/apps/docs/components/Playground.js b/apps/docs/components/Playground.js index 1a67c924..c85920d4 100644 --- a/apps/docs/components/Playground.js +++ b/apps/docs/components/Playground.js @@ -82,7 +82,6 @@ export default function Playground() { }, ]); const [url, setUrl] = useState(null); - let [loading] = useState(true); const [color] = useState('var(--ifm-color-primary)'); const [selectedPreviewFile, setSelectedPreviewFile] = useState(null); // const [resetPreviewFiles, setResetPreviewFiles] = useState(false); @@ -420,10 +419,7 @@ export default function Playground() { > {isSidebarOpen && (!url || error) && (
- +
)} {isSidebarOpen && url && !error && ( @@ -499,13 +495,13 @@ export default function Playground() { > {file.isEditing ? ( renameFile(e.target.value)} onBlur={() => disableEditMode(index)} + onChange={(e) => renameFile(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') disableEditMode(index); }} + type="text" + value={editingValue} {...stylex.props([ styles.tabInput, activeFileIndex === index && styles.editingInput, @@ -513,9 +509,9 @@ export default function Playground() { /> ) : ( enableEditMode(index)} + readOnly={true} + value={file.name} {...stylex.props(styles.tabInput)} /> )} @@ -688,6 +684,7 @@ const styles = stylex.create({ display: 'flex', alignItems: 'center', justifyContent: 'center', + borderStyle: 'none', marginLeft: '10px', backgroundColor: 'transparent', cursor: 'pointer', @@ -728,7 +725,7 @@ const styles = stylex.create({ directoryText: { marginLeft: '8px', textAlign: 'left', - flex: 1, + flex: '1', }, tabList: { display: 'flex', @@ -764,6 +761,7 @@ const styles = stylex.create({ tabInput: { flex: '1', backgroundColor: 'transparent', + borderStyle: 'none', color: 'inherit', fontSize: '14px', padding: '2px 4px', @@ -784,6 +782,7 @@ const styles = stylex.create({ alignItems: 'center', justifyContent: 'center', marginLeft: '10px', + borderStyle: 'none', backgroundColor: 'transparent', cursor: 'pointer', padding: '4px', @@ -813,6 +812,7 @@ const styles = stylex.create({ width: '100%', height: '100%', backgroundColor: '#ffffff', + borderStyle: 'none', }, loading: { display: 'flex',