[{"_1":2,"_191":-5,"_192":-5},"loaderData",{"_3":4,"_58":59,"_190":-5},"root",{"_5":6,"_19":-5,"_20":-5,"_21":22,"_39":-5,"_40":-5,"_41":-5,"_42":43,"_54":55,"_56":57},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18},"SUPABASE_URL","https://hello.websim.com","SUPABASE_KEY","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9jamVmZ2NqamlxeWt3YWR2dnJkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTE4MzI5OTMsImV4cCI6MjAyNzQwODk5M30.vsreOYwk8pKsr8NFlzpIzWAiD-vXj6ijv_Bhn1vYtHs","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","GOOGLE_OAUTH_CLIENT_ID","891181648870-i708rj1bgjol84hie20shfr4u4ecf3o7.apps.googleusercontent.com","authUser","user","snapshotData",{"_23":-5,"_24":-5,"_25":-5,"_26":-5,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5,"_34":-5,"_35":-5,"_36":-5,"_37":-5,"_38":-5},"lastProjectId","sidebarTab","homepageTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","videoMuted","videoVolume","navigationContext","hasSeenFeedOnboarding","plan","balances","rewards","origins",{"_44":45,"_46":47,"_48":49,"_50":51,"_52":53},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","generationOrigin","https://generation.websim.com/rivet","isMobile",false,"theme","auto","slug",{"_60":61,"_62":63,"_128":129,"_150":151,"_185":186,"_187":-5,"_188":189},"version","1","project",{"_64":62,"_65":66,"_67":68,"_69":70,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":97,"_98":99,"_58":109,"_110":55,"_111":55,"_112":113,"_114":-5,"_115":-5,"_116":117,"_122":-5,"_123":124,"_127":55},"_type","id","1n8ormy0sd0syd2h27lh","created_at","2025-08-05T20:19:08.057Z","created_by",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":78,"_79":80,"_81":55},"a4e91f9d-711b-4bed-af4f-13a45bc9f85e","username","BookwormKevin","2024-07-05T03:55:50.303Z","avatar_url","https://avatars.websim.ai/a4e91f9d-711b-4bed-af4f-13a45bc9f85e/um9vbKFiGe6YF7aMc.webp","discord_username","bookwormkevin","discord_id","469657630718296067","is_admin","updated_at","2026-01-25T17:44:46.552Z","title","Pixel Art Extractor","comments_mode","open","visibility","public","current_version",94,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_100":101,"_102":66,"_103":104,"_105":106,"_107":108},"~type","project_stats","project_id","views",358,"likes",5,"comments",3,"pixel-art-extractor","auto_set_current","enable_chat","description","Extract Pixel Art from a screenshot with this tool!","generated_description","from_template","domains",[118],{"_119":120,"_82":121},"name","pixel-art-extractor.on.websim.ai","2025-08-05T20:54:35.418Z","thumbnail","video",{"_125":126},"url","https://api.websim.com/blobs/01988739-a78e-7887-a6cf-9db7ed423708.mp4","has_active_experiment","project_revision",{"_64":128,"_65":130,"_60":91,"_67":131,"_132":-5,"_93":-5,"_133":134,"_135":66,"_69":136,"_137":138,"_102":66,"_82":139,"_95":-5,"_98":140,"_143":55,"_144":145,"_146":-5,"_147":-5,"_148":149},"01999c1f-153e-7c01-a507-893448df1727","2025-09-30T19:35:06.814Z","visited_at","parent_revision_version",92,"parent_revision_project_id",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":78,"_79":80,"_81":55},"meta",{"_60":61},"2026-01-25T17:44:47.026Z",{"_141":142},"multiplayer_count",0,"draft","site_id","Ynqnv34JEBK22hpTA","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/01999c1f-c909-7ad7-8eef-427c53ae3115","site",{"_64":150,"_65":145,"_93":152,"_67":153,"_154":155,"_156":157,"_158":159,"_84":85,"_171":172,"_173":174,"_125":-5,"_179":180,"_181":182,"_95":-5,"_183":184},"unRy1WFqwUTSeZbrd","2025-09-30T19:35:07.546Z","state","done","model","gpt-5","lore",{"_60":160,"_161":162,"_163":55,"_164":55,"_165":55,"_166":55,"_167":55,"_168":55,"_169":55,"_170":55},1,"attachments",[],"enableMultiplayer_v2","enableMobilePrompt","enableDB","enableLLM2","enableComments","enableApi","enableTweaks","enableDB_v2_1","owner",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":78,"_79":80,"_81":55},"prompt",{"_175":176,"_177":178},"type","plaintext","text","oh i dont see the purple choose image button at all anymore, i just see the text \"choose image\". make it so the choose image text always takes 2 lines, and the purple button goes around that text and not any bigger.","link_url","/p/1n8ormy0sd0syd2h27lh","versioned_link_url","/p/1n8ormy0sd0syd2h27lh/94","yapping","**Adjusting button styling**\n\nI need to adjust the CSS and HTML to style the \"Choose Image\" button in purple, ensuring it wraps into two lines and fits the text exactly without expanding. The file input has a label with a class of `.file-label`. They previously wanted the title on two lines and the button not to be wider than necessary. I’ll modify the label's CSS to display inline-block, restrict width, and ensure that the text always takes up two lines. Maybe I can insert a `
` tag to enforce that.\n**Styling the label as a button**\n\nI’m considering using `white-space: normal` and `word-break` to manage how text wraps. To ensure it always fits into two lines, I can use a `Choose
Image` inside the label. It seems the user can only see text instead of the purple button because the `.file-label` has a default display and doesn’t have proper background styling. I'll style `.file-label` like a button with a consistent purple gradient while keeping the input hidden. My changes to `index.html` will include a line break and wrap text properly.\n**Adding line breaks and styling**\n\nI’m going to add a `Choose Image` to enforce a line break using `display: block` and adjusting line-height. They want it to always be two lines, so I’ll include a `
` for that. For the styles, I’ll set a purple gradient background for `.file-label`, ensuring it’s inline-block with tight padding and auto width. \n\nI’ll change `white-space` to allow wrapping while keeping a similar style to buttons. Although there are notes against vibrant gradients, I think it's acceptable here since this project already incorporates them.\n**Updating label styles**\n\nI need to update `styles.css` by modifying the `.file-label` to have `white-space: normal`, `display: inline-block`, and a background gradient with padding, border-radius, and white text. The explicit `
` line break will ensure it takes up two lines. I'll also set the width to auto and max-content to none to avoid making it too large. \n\nIt’s clear that the purple button isn't visible because the label lacks the button background. I’ll remove any duplicate hover transforms and ensure the `.top-left` layout stays side by side for visibility. The updates in `index.html` should include the label text adjustments with `` or `
` while keeping the code concise.\n**Updating .file-label styles**\n\nI see that I need to modify the main `.file-label` to incorporate new styling. I’ll add a rule that includes a linear-gradient background in purple, white text color, no border, and appropriate padding and font size. The button should be visually appealing with a border-radius and cursor set to pointer.\n\nTo prevent any unnecessary expansion, I’ll set `width:auto` and ensure the height adjusts to the content. I’ll change the existing `.file-label` white-space from nowrap to normal, add the new display properties, and provide the updates with minimal code lines for clarity.\n\nI will style the Choose Image label as a compact purple button and force the text to always display on two lines by inserting a line break.\n\nindex.html\n\n```index.html\n```\n\nstyles.css\n```styles.css\n```\n\nstyles.css\n```styles.css\n```","cursor","eyJpZCI6IjFuOG9ybXkwc2Qwc3lkMmgyN2xoIn0","token","included",[],"routes/browser/layout","actionData","errors"]